diff --git a/.eslintignore b/.eslintignore index fbdd70703f3c40..9de2cc28729602 100644 --- a/.eslintignore +++ b/.eslintignore @@ -33,6 +33,7 @@ target /x-pack/plugins/canvas/shareable_runtime/build /x-pack/plugins/canvas/storybook /x-pack/plugins/monitoring/public/lib/jquery_flot +/x-pack/plugins/reporting/server/export_types/printable_pdf/server/lib/pdf/assets/** /x-pack/legacy/plugins/infra/common/graphql/types.ts /x-pack/legacy/plugins/infra/public/graphql/types.ts /x-pack/legacy/plugins/infra/server/graphql/types.ts diff --git a/packages/kbn-monaco/src/xjson/grammar.ts b/packages/kbn-monaco/src/xjson/grammar.ts index e95059f9ece2dd..fbd7b3d319c1de 100644 --- a/packages/kbn-monaco/src/xjson/grammar.ts +++ b/packages/kbn-monaco/src/xjson/grammar.ts @@ -200,12 +200,13 @@ export const createParser = () => { try { value(); + white(); } catch (e) { errored = true; annos.push({ type: AnnoTypes.error, at: e.at - 1, text: e.message }); } if (!errored && ch) { - error('Syntax error'); + annos.push({ type: AnnoTypes.error, at: at, text: 'Syntax Error' }); } return { annotations: annos }; } diff --git a/packages/kbn-monaco/src/xjson/language.ts b/packages/kbn-monaco/src/xjson/language.ts index fe505818d3c9ab..54b7004fecd8e5 100644 --- a/packages/kbn-monaco/src/xjson/language.ts +++ b/packages/kbn-monaco/src/xjson/language.ts @@ -52,7 +52,10 @@ export const registerGrammarChecker = (editor: monaco.editor.IEditor) => { const updateAnnos = async () => { const { annotations } = await wps.getAnnos(); - const model = editor.getModel() as monaco.editor.ITextModel; + const model = editor.getModel() as monaco.editor.ITextModel | null; + if (!model) { + return; + } monaco.editor.setModelMarkers( model, OWNER, diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.scss b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.scss new file mode 100644 index 00000000000000..90b645f70084e6 --- /dev/null +++ b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.scss @@ -0,0 +1,4 @@ +.dscFieldDetails__barContainer { + // Constrains value to the flex item, and allows for truncation when necessary + min-width: 0; +} diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx index 398a945e0f876a..281fc9a392d7da 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_field_bucket.tsx @@ -17,11 +17,12 @@ * under the License. */ import React from 'react'; -import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; +import { EuiText, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { StringFieldProgressBar } from './string_progress_bar'; import { Bucket } from './types'; import { IndexPatternField } from '../../../../../data/public'; +import './discover_field_bucket.scss'; interface Props { bucket: Bucket; @@ -47,18 +48,40 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) { return ( <> - - - - {bucket.display === '' ? emptyTxt : bucket.display} - + + + + + + {bucket.display === '' ? emptyTxt : bucket.display} + + + + + {bucket.percent}% + + + + {field.filterable && (
onAddFilter(field, bucket.value, '+')} aria-label={addLabel} data-test-subj={`plus-${field.name}-${bucket.value}`} @@ -73,7 +96,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) { /> onAddFilter(field, bucket.value, '-')} aria-label={removeLabel} data-test-subj={`minus-${field.name}-${bucket.value}`} @@ -90,7 +113,7 @@ export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) { )} - + ); } diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx index b56f7ba8a852fe..dd95a45f71626f 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx @@ -17,7 +17,7 @@ * under the License. */ import React from 'react'; -import { EuiLink, EuiSpacer, EuiIconTip, EuiText } from '@elastic/eui'; +import { EuiLink, EuiIconTip, EuiText } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { DiscoverFieldBucket } from './discover_field_bucket'; import { getWarnings } from './lib/get_warnings'; @@ -78,7 +78,6 @@ export function DiscoverFieldDetails({ {details.visualizeUrl && ( <> - { getServices().core.application.navigateToApp(details.visualizeUrl.app, { diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss index 9f7700c7f395cf..ae7e915f097737 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss +++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss @@ -121,14 +121,6 @@ } } -/* - Fixes EUI known issue https://github.com/elastic/eui/issues/1749 -*/ -.dscProgressBarTooltip__anchor { - display: block; -} - - .dscFieldSearch { padding: $euiSizeS; } diff --git a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx index 7ea41aa4bf270c..c8693727b07255 100644 --- a/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx +++ b/src/plugins/discover/public/application/components/sidebar/string_progress_bar.tsx @@ -17,35 +17,18 @@ * under the License. */ import React from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiText, EuiToolTip } from '@elastic/eui'; +import { EuiProgress } from '@elastic/eui'; interface Props { percent: number; count: number; + value: string; } -export function StringFieldProgressBar(props: Props) { +export function StringFieldProgressBar({ value, percent, count }: Props) { + const ariaLabel = `${value}: ${count} (${percent}%)`; + return ( - - - - - - - {props.percent}% - - - + ); } diff --git a/src/plugins/ui_actions/public/actions/action_internal.ts b/src/plugins/ui_actions/public/actions/action_internal.ts index aba1e22fe09ee2..10eb760b130898 100644 --- a/src/plugins/ui_actions/public/actions/action_internal.ts +++ b/src/plugins/ui_actions/public/actions/action_internal.ts @@ -24,6 +24,9 @@ import { Presentable } from '../util/presentable'; import { uiToReactComponent } from '../../../kibana_react/public'; import { ActionType } from '../types'; +/** + * @internal + */ export class ActionInternal implements Action>, Presentable> { constructor(public readonly definition: A) {} diff --git a/src/plugins/ui_actions/public/service/ui_actions_service.test.ts b/src/plugins/ui_actions/public/service/ui_actions_service.test.ts index 45a1bdffa52adf..39502c3dd17fcd 100644 --- a/src/plugins/ui_actions/public/service/ui_actions_service.test.ts +++ b/src/plugins/ui_actions/public/service/ui_actions_service.test.ts @@ -20,7 +20,7 @@ import { UiActionsService } from './ui_actions_service'; import { Action, ActionInternal, createAction } from '../actions'; import { createHelloWorldAction } from '../tests/test_samples'; -import { ActionRegistry, TriggerRegistry, TriggerId, ActionType } from '../types'; +import { TriggerRegistry, TriggerId, ActionType, ActionRegistry } from '../types'; import { Trigger } from '../triggers'; // Casting to ActionType or TriggerId is a hack - in a real situation use diff --git a/src/plugins/ui_actions/public/service/ui_actions_service.ts b/src/plugins/ui_actions/public/service/ui_actions_service.ts index 760897f0287d82..11f5769a946483 100644 --- a/src/plugins/ui_actions/public/service/ui_actions_service.ts +++ b/src/plugins/ui_actions/public/service/ui_actions_service.ts @@ -220,7 +220,6 @@ export class UiActionsService { for (const [key, value] of this.actions.entries()) actions.set(key, value); for (const [key, value] of this.triggerToActions.entries()) triggerToActions.set(key, [...value]); - return new UiActionsService({ triggers, actions, triggerToActions }); }; } diff --git a/test/functional/apps/dashboard/time_zones.js b/test/functional/apps/dashboard/time_zones.js index b0344a8b69064c..4e95a14efb4d60 100644 --- a/test/functional/apps/dashboard/time_zones.js +++ b/test/functional/apps/dashboard/time_zones.js @@ -24,7 +24,13 @@ export default function ({ getService, getPageObjects }) { const pieChart = getService('pieChart'); const esArchiver = getService('esArchiver'); const kibanaServer = getService('kibanaServer'); - const PageObjects = getPageObjects(['dashboard', 'timePicker', 'settings', 'common']); + const PageObjects = getPageObjects([ + 'dashboard', + 'timePicker', + 'settings', + 'common', + 'savedObjects', + ]); describe('dashboard time zones', function () { this.tags('includeFirefox'); @@ -36,10 +42,10 @@ export default function ({ getService, getPageObjects }) { }); await PageObjects.settings.navigateTo(); await PageObjects.settings.clickKibanaSavedObjects(); - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', 'timezonetest_6_2_4.json') ); - await PageObjects.settings.checkImportSucceeded(); + await PageObjects.savedObjects.checkImportSucceeded(); await PageObjects.common.navigateToApp('dashboard'); await PageObjects.dashboard.preserveCrossAppState(); await PageObjects.dashboard.loadSavedDashboard('time zone test'); diff --git a/test/functional/apps/management/_import_objects.js b/test/functional/apps/management/_import_objects.js index 6306d11eadb653..c69111be6972bb 100644 --- a/test/functional/apps/management/_import_objects.js +++ b/test/functional/apps/management/_import_objects.js @@ -24,7 +24,7 @@ import { indexBy } from 'lodash'; export default function ({ getService, getPageObjects }) { const kibanaServer = getService('kibanaServer'); const esArchiver = getService('esArchiver'); - const PageObjects = getPageObjects(['common', 'settings', 'header']); + const PageObjects = getPageObjects(['common', 'settings', 'header', 'savedObjects']); const testSubjects = getService('testSubjects'); const log = getService('log'); @@ -43,22 +43,19 @@ export default function ({ getService, getPageObjects }) { }); it('should import saved objects', async function () { - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects.ndjson') ); - await PageObjects.settings.checkImportSucceeded(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); // get all the elements in the table, and index them by the 'title' visible text field - const elements = indexBy( - await PageObjects.settings.getSavedObjectElementsInTable(), - 'title' - ); + const elements = indexBy(await PageObjects.savedObjects.getElementsInTable(), 'title'); log.debug("check that 'Log Agents' is in table as a visualization"); expect(elements['Log Agents'].objectType).to.eql('visualization'); await elements['logstash-*'].relationshipsElement.click(); - const flyout = indexBy(await PageObjects.settings.getRelationshipFlyout(), 'title'); + const flyout = indexBy(await PageObjects.savedObjects.getRelationshipFlyout(), 'title'); log.debug( "check that 'Shared-Item Visualization AreaChart' shows 'logstash-*' as it's Parent" ); @@ -68,18 +65,18 @@ export default function ({ getService, getPageObjects }) { }); it('should provide dialog to allow the importing of saved objects with index pattern conflicts', async function () { - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_conflicts.ndjson') ); - await PageObjects.settings.checkImportConflictsWarning(); + await PageObjects.savedObjects.checkImportConflictsWarning(); await PageObjects.settings.associateIndexPattern( 'd1e4c910-a2e6-11e7-bb30-233be9be6a15', 'logstash-*' ); - await PageObjects.settings.clickConfirmChanges(); + await PageObjects.savedObjects.clickConfirmChanges(); await PageObjects.header.waitUntilLoadingHasFinished(); - await PageObjects.settings.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + await PageObjects.savedObjects.clickImportDone(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object with index pattern conflict'); expect(isSavedObjectImported).to.be(true); }); @@ -87,14 +84,14 @@ export default function ({ getService, getPageObjects }) { it('should allow the user to override duplicate saved objects', async function () { // This data has already been loaded by the "visualize" esArchive. We'll load it again // so that we can override the existing visualization. - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_exists.ndjson'), false ); - await PageObjects.settings.checkImportConflictsWarning(); + await PageObjects.savedObjects.checkImportConflictsWarning(); await PageObjects.settings.associateIndexPattern('logstash-*', 'logstash-*'); - await PageObjects.settings.clickConfirmChanges(); + await PageObjects.savedObjects.clickConfirmChanges(); // Override the visualization. await PageObjects.common.clickConfirmOnModal(); @@ -106,14 +103,14 @@ export default function ({ getService, getPageObjects }) { it('should allow the user to cancel overriding duplicate saved objects', async function () { // This data has already been loaded by the "visualize" esArchive. We'll load it again // so that we can be prompted to override the existing visualization. - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_exists.ndjson'), false ); - await PageObjects.settings.checkImportConflictsWarning(); + await PageObjects.savedObjects.checkImportConflictsWarning(); await PageObjects.settings.associateIndexPattern('logstash-*', 'logstash-*'); - await PageObjects.settings.clickConfirmChanges(); + await PageObjects.savedObjects.clickConfirmChanges(); // *Don't* override the visualization. await PageObjects.common.clickCancelOnModal(); @@ -123,86 +120,80 @@ export default function ({ getService, getPageObjects }) { }); it('should import saved objects linked to saved searches', async function () { - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_saved_search.ndjson') ); - await PageObjects.settings.checkImportSucceeded(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_connected_to_saved_search.ndjson') ); - await PageObjects.settings.checkImportSucceeded(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object connected to saved search'); expect(isSavedObjectImported).to.be(true); }); it('should not import saved objects linked to saved searches when saved search does not exist', async function () { - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_connected_to_saved_search.ndjson') ); - await PageObjects.settings.checkNoneImported(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkNoneImported(); + await PageObjects.savedObjects.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object connected to saved search'); expect(isSavedObjectImported).to.be(false); }); it('should not import saved objects linked to saved searches when saved search index pattern does not exist', async function () { - const elements = indexBy( - await PageObjects.settings.getSavedObjectElementsInTable(), - 'title' - ); + const elements = indexBy(await PageObjects.savedObjects.getElementsInTable(), 'title'); await elements['logstash-*'].checkbox.click(); - await PageObjects.settings.clickSavedObjectsDelete(); + await PageObjects.savedObjects.clickDelete(); - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_with_saved_search.ndjson') ); // Wait for all the saves to happen - await PageObjects.settings.checkImportConflictsWarning(); - await PageObjects.settings.clickConfirmChanges(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportConflictsWarning(); + await PageObjects.savedObjects.clickConfirmChanges(); + await PageObjects.savedObjects.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object connected to saved search'); expect(isSavedObjectImported).to.be(false); }); it('should import saved objects with index patterns when index patterns already exists', async () => { // First, import the objects - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_with_index_patterns.ndjson') ); - await PageObjects.settings.checkImportSucceeded(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object imported with index pattern'); expect(isSavedObjectImported).to.be(true); }); it('should import saved objects with index patterns when index patterns does not exists', async () => { // First, we need to delete the index pattern - const elements = indexBy( - await PageObjects.settings.getSavedObjectElementsInTable(), - 'title' - ); + const elements = indexBy(await PageObjects.savedObjects.getElementsInTable(), 'title'); await elements['logstash-*'].checkbox.click(); - await PageObjects.settings.clickSavedObjectsDelete(); + await PageObjects.savedObjects.clickDelete(); // Then, import the objects - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_with_index_patterns.ndjson') ); - await PageObjects.settings.checkImportSucceeded(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object imported with index pattern'); expect(isSavedObjectImported).to.be(true); }); @@ -222,30 +213,30 @@ export default function ({ getService, getPageObjects }) { }); it('should import saved objects', async function () { - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects.json') ); - await PageObjects.settings.checkImportSucceeded(); - await PageObjects.settings.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('Log Agents'); expect(isSavedObjectImported).to.be(true); }); it('should provide dialog to allow the importing of saved objects with index pattern conflicts', async function () { - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects-conflicts.json') ); - await PageObjects.settings.checkImportLegacyWarning(); - await PageObjects.settings.checkImportConflictsWarning(); + await PageObjects.savedObjects.checkImportLegacyWarning(); + await PageObjects.savedObjects.checkImportConflictsWarning(); await PageObjects.settings.associateIndexPattern( 'd1e4c910-a2e6-11e7-bb30-233be9be6a15', 'logstash-*' ); - await PageObjects.settings.clickConfirmChanges(); + await PageObjects.savedObjects.clickConfirmChanges(); await PageObjects.header.waitUntilLoadingHasFinished(); - await PageObjects.settings.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + await PageObjects.savedObjects.clickImportDone(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object with index pattern conflict'); expect(isSavedObjectImported).to.be(true); }); @@ -253,15 +244,15 @@ export default function ({ getService, getPageObjects }) { it('should allow the user to override duplicate saved objects', async function () { // This data has already been loaded by the "visualize" esArchive. We'll load it again // so that we can override the existing visualization. - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_exists.json'), false ); - await PageObjects.settings.checkImportLegacyWarning(); - await PageObjects.settings.checkImportConflictsWarning(); + await PageObjects.savedObjects.checkImportLegacyWarning(); + await PageObjects.savedObjects.checkImportConflictsWarning(); await PageObjects.settings.associateIndexPattern('logstash-*', 'logstash-*'); - await PageObjects.settings.clickConfirmChanges(); + await PageObjects.savedObjects.clickConfirmChanges(); // Override the visualization. await PageObjects.common.clickConfirmOnModal(); @@ -273,15 +264,15 @@ export default function ({ getService, getPageObjects }) { it('should allow the user to cancel overriding duplicate saved objects', async function () { // This data has already been loaded by the "visualize" esArchive. We'll load it again // so that we can be prompted to override the existing visualization. - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_exists.json'), false ); - await PageObjects.settings.checkImportLegacyWarning(); - await PageObjects.settings.checkImportConflictsWarning(); + await PageObjects.savedObjects.checkImportLegacyWarning(); + await PageObjects.savedObjects.checkImportConflictsWarning(); await PageObjects.settings.associateIndexPattern('logstash-*', 'logstash-*'); - await PageObjects.settings.clickConfirmChanges(); + await PageObjects.savedObjects.clickConfirmChanges(); // *Don't* override the visualization. await PageObjects.common.clickCancelOnModal(); @@ -291,95 +282,89 @@ export default function ({ getService, getPageObjects }) { }); it('should import saved objects linked to saved searches', async function () { - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_saved_search.json') ); - await PageObjects.settings.checkImportSucceeded(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_connected_to_saved_search.json') ); - await PageObjects.settings.checkImportSucceeded(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object connected to saved search'); expect(isSavedObjectImported).to.be(true); }); it('should not import saved objects linked to saved searches when saved search does not exist', async function () { - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_connected_to_saved_search.json') ); - await PageObjects.settings.checkImportFailedWarning(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportFailedWarning(); + await PageObjects.savedObjects.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object connected to saved search'); expect(isSavedObjectImported).to.be(false); }); it('should not import saved objects linked to saved searches when saved search index pattern does not exist', async function () { // First, import the saved search - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_saved_search.json') ); // Wait for all the saves to happen - await PageObjects.settings.checkImportSucceeded(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); // Second, we need to delete the index pattern - const elements = indexBy( - await PageObjects.settings.getSavedObjectElementsInTable(), - 'title' - ); + const elements = indexBy(await PageObjects.savedObjects.getElementsInTable(), 'title'); await elements['logstash-*'].checkbox.click(); - await PageObjects.settings.clickSavedObjectsDelete(); + await PageObjects.savedObjects.clickDelete(); // Last, import a saved object connected to the saved search // This should NOT show the conflicts - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_connected_to_saved_search.json') ); // Wait for all the saves to happen - await PageObjects.settings.checkNoneImported(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkNoneImported(); + await PageObjects.savedObjects.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object connected to saved search'); expect(isSavedObjectImported).to.be(false); }); it('should import saved objects with index patterns when index patterns already exists', async () => { // First, import the objects - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_with_index_patterns.json') ); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object imported with index pattern'); expect(isSavedObjectImported).to.be(true); }); it('should import saved objects with index patterns when index patterns does not exists', async () => { // First, we need to delete the index pattern - const elements = indexBy( - await PageObjects.settings.getSavedObjectElementsInTable(), - 'title' - ); + const elements = indexBy(await PageObjects.savedObjects.getElementsInTable(), 'title'); await elements['logstash-*'].checkbox.click(); - await PageObjects.settings.clickSavedObjectsDelete(); + await PageObjects.savedObjects.clickDelete(); // Then, import the objects - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', '_import_objects_with_index_patterns.json') ); - await PageObjects.settings.checkImportSucceeded(); - await PageObjects.settings.clickImportDone(); + await PageObjects.savedObjects.checkImportSucceeded(); + await PageObjects.savedObjects.clickImportDone(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); const isSavedObjectImported = objects.includes('saved object imported with index pattern'); expect(isSavedObjectImported).to.be(true); }); diff --git a/test/functional/apps/management/_mgmt_import_saved_objects.js b/test/functional/apps/management/_mgmt_import_saved_objects.js index a8a0a19d4962d9..3a9f8665fd33bc 100644 --- a/test/functional/apps/management/_mgmt_import_saved_objects.js +++ b/test/functional/apps/management/_mgmt_import_saved_objects.js @@ -22,7 +22,7 @@ import path from 'path'; export default function ({ getService, getPageObjects }) { const esArchiver = getService('esArchiver'); - const PageObjects = getPageObjects(['common', 'settings', 'header']); + const PageObjects = getPageObjects(['common', 'settings', 'header', 'savedObjects']); //in 6.4.0 bug the Saved Search conflict would be resolved and get imported but the visualization //that referenced the saved search was not imported.( https://github.com/elastic/kibana/issues/22238) @@ -40,19 +40,19 @@ export default function ({ getService, getPageObjects }) { it('should import saved objects mgmt', async function () { await PageObjects.settings.clickKibanaSavedObjects(); - await PageObjects.settings.importFile( + await PageObjects.savedObjects.importFile( path.join(__dirname, 'exports', 'mgmt_import_objects.json') ); await PageObjects.settings.associateIndexPattern( '4c3f3c30-ac94-11e8-a651-614b2788174a', 'logstash-*' ); - await PageObjects.settings.clickConfirmChanges(); - await PageObjects.settings.clickImportDone(); - await PageObjects.settings.waitUntilSavedObjectsTableIsNotLoading(); + await PageObjects.savedObjects.clickConfirmChanges(); + await PageObjects.savedObjects.clickImportDone(); + await PageObjects.savedObjects.waitTableIsLoaded(); //instead of asserting on count- am asserting on the titles- which is more accurate than count. - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); expect(objects.includes('mysavedsearch')).to.be(true); expect(objects.includes('mysavedviz')).to.be(true); }); diff --git a/test/functional/apps/saved_objects_management/edit_saved_object.ts b/test/functional/apps/saved_objects_management/edit_saved_object.ts index 6e4b820879ed38..2c9200c2f8d936 100644 --- a/test/functional/apps/saved_objects_management/edit_saved_object.ts +++ b/test/functional/apps/saved_objects_management/edit_saved_object.ts @@ -25,7 +25,7 @@ const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); export default function ({ getPageObjects, getService }: FtrProviderContext) { const esArchiver = getService('esArchiver'); const testSubjects = getService('testSubjects'); - const PageObjects = getPageObjects(['common', 'settings']); + const PageObjects = getPageObjects(['common', 'settings', 'savedObjects']); const browser = getService('browser'); const find = getService('find'); @@ -79,7 +79,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await PageObjects.settings.navigateTo(); await PageObjects.settings.clickKibanaSavedObjects(); - let objects = await PageObjects.settings.getSavedObjectsInTable(); + let objects = await PageObjects.savedObjects.getRowTitles(); expect(objects.includes('A Dashboard')).to.be(true); await PageObjects.common.navigateToUrl( @@ -99,7 +99,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await focusAndClickButton('savedObjectEditSave'); - objects = await PageObjects.settings.getSavedObjectsInTable(); + objects = await PageObjects.savedObjects.getRowTitles(); expect(objects.includes('A Dashboard')).to.be(false); expect(objects.includes('Edited Dashboard')).to.be(true); @@ -127,7 +127,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await focusAndClickButton('savedObjectEditDelete'); await PageObjects.common.clickConfirmOnModal(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); expect(objects.includes('A Dashboard')).to.be(false); }); @@ -145,7 +145,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await PageObjects.settings.navigateTo(); await PageObjects.settings.clickKibanaSavedObjects(); - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); expect(objects.includes('A Pie')).to.be(true); await PageObjects.common.navigateToUrl('management', testVisualizationUrl, { @@ -160,7 +160,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await focusAndClickButton('savedObjectEditSave'); - await PageObjects.settings.getSavedObjectsInTable(); + await PageObjects.savedObjects.getRowTitles(); await PageObjects.common.navigateToUrl('management', testVisualizationUrl, { shouldUseHashForSubUrl: false, @@ -173,7 +173,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await focusAndClickButton('savedObjectEditSave'); - await PageObjects.settings.getSavedObjectsInTable(); + await PageObjects.savedObjects.getRowTitles(); await PageObjects.common.navigateToUrl('management', testVisualizationUrl, { shouldUseHashForSubUrl: false, diff --git a/test/functional/page_objects/index.ts b/test/functional/page_objects/index.ts index 10b09c742f58e7..d3a8fb73ac3e5c 100644 --- a/test/functional/page_objects/index.ts +++ b/test/functional/page_objects/index.ts @@ -38,6 +38,7 @@ import { VisualizeChartPageProvider } from './visualize_chart_page'; import { TileMapPageProvider } from './tile_map_page'; import { TagCloudPageProvider } from './tag_cloud_page'; import { VegaChartPageProvider } from './vega_chart_page'; +import { SavedObjectsPageProvider } from './management/saved_objects_page'; export const pageObjects = { common: CommonPageProvider, @@ -61,4 +62,5 @@ export const pageObjects = { tileMap: TileMapPageProvider, tagCloud: TagCloudPageProvider, vegaChart: VegaChartPageProvider, + savedObjects: SavedObjectsPageProvider, }; diff --git a/test/functional/page_objects/management/saved_objects_page.ts b/test/functional/page_objects/management/saved_objects_page.ts new file mode 100644 index 00000000000000..d058695ea6819d --- /dev/null +++ b/test/functional/page_objects/management/saved_objects_page.ts @@ -0,0 +1,184 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { map as mapAsync } from 'bluebird'; +import { FtrProviderContext } from '../../ftr_provider_context'; + +export function SavedObjectsPageProvider({ getService, getPageObjects }: FtrProviderContext) { + const log = getService('log'); + const retry = getService('retry'); + const browser = getService('browser'); + const find = getService('find'); + const testSubjects = getService('testSubjects'); + const PageObjects = getPageObjects(['header', 'common']); + + class SavedObjectsPage { + async searchForObject(objectName: string) { + const searchBox = await testSubjects.find('savedObjectSearchBar'); + await searchBox.clearValue(); + await searchBox.type(objectName); + await searchBox.pressKeys(browser.keys.ENTER); + } + + async importFile(path: string, overwriteAll = true) { + log.debug(`importFile(${path})`); + + log.debug(`Clicking importObjects`); + await testSubjects.click('importObjects'); + await PageObjects.common.setFileInputPath(path); + + if (!overwriteAll) { + log.debug(`Toggling overwriteAll`); + await testSubjects.click('importSavedObjectsOverwriteToggle'); + } else { + log.debug(`Leaving overwriteAll alone`); + } + await testSubjects.click('importSavedObjectsImportBtn'); + log.debug(`done importing the file`); + + // Wait for all the saves to happen + await PageObjects.header.waitUntilLoadingHasFinished(); + } + + async checkImportSucceeded() { + await testSubjects.existOrFail('importSavedObjectsSuccess', { timeout: 20000 }); + } + + async checkNoneImported() { + await testSubjects.existOrFail('importSavedObjectsSuccessNoneImported', { timeout: 20000 }); + } + + async checkImportConflictsWarning() { + await testSubjects.existOrFail('importSavedObjectsConflictsWarning', { timeout: 20000 }); + } + + async checkImportLegacyWarning() { + await testSubjects.existOrFail('importSavedObjectsLegacyWarning', { timeout: 20000 }); + } + + async checkImportFailedWarning() { + await testSubjects.existOrFail('importSavedObjectsFailedWarning', { timeout: 20000 }); + } + + async clickImportDone() { + await testSubjects.click('importSavedObjectsDoneBtn'); + await this.waitTableIsLoaded(); + } + + async clickConfirmChanges() { + await testSubjects.click('importSavedObjectsConfirmBtn'); + } + + async waitTableIsLoaded() { + return retry.try(async () => { + const exists = await find.existsByDisplayedByCssSelector( + '*[data-test-subj="savedObjectsTable"] .euiBasicTable-loading' + ); + if (exists) { + throw new Error('Waiting'); + } + return true; + }); + } + + async getElementsInTable() { + const rows = await testSubjects.findAll('~savedObjectsTableRow'); + return mapAsync(rows, async (row) => { + const checkbox = await row.findByCssSelector('[data-test-subj*="checkboxSelectRow"]'); + // return the object type aria-label="index patterns" + const objectType = await row.findByTestSubject('objectType'); + const titleElement = await row.findByTestSubject('savedObjectsTableRowTitle'); + // not all rows have inspect button - Advanced Settings objects don't + let inspectElement; + const innerHtml = await row.getAttribute('innerHTML'); + if (innerHtml.includes('Inspect')) { + inspectElement = await row.findByTestSubject('savedObjectsTableAction-inspect'); + } else { + inspectElement = null; + } + const relationshipsElement = await row.findByTestSubject( + 'savedObjectsTableAction-relationships' + ); + return { + checkbox, + objectType: await objectType.getAttribute('aria-label'), + titleElement, + title: await titleElement.getVisibleText(), + inspectElement, + relationshipsElement, + }; + }); + } + + async getRowTitles() { + await this.waitTableIsLoaded(); + const table = await testSubjects.find('savedObjectsTable'); + const $ = await table.parseDomContent(); + return $.findTestSubjects('savedObjectsTableRowTitle') + .toArray() + .map((cell) => $(cell).find('.euiTableCellContent').text()); + } + + async getRelationshipFlyout() { + const rows = await testSubjects.findAll('relationshipsTableRow'); + return mapAsync(rows, async (row) => { + const objectType = await row.findByTestSubject('relationshipsObjectType'); + const relationship = await row.findByTestSubject('directRelationship'); + const titleElement = await row.findByTestSubject('relationshipsTitle'); + const inspectElement = await row.findByTestSubject('relationshipsTableAction-inspect'); + return { + objectType: await objectType.getAttribute('aria-label'), + relationship: await relationship.getVisibleText(), + titleElement, + title: await titleElement.getVisibleText(), + inspectElement, + }; + }); + } + + async getTableSummary() { + const table = await testSubjects.find('savedObjectsTable'); + const $ = await table.parseDomContent(); + return $('tbody tr') + .toArray() + .map((row) => { + return { + title: $(row).find('td:nth-child(3) .euiTableCellContent').text(), + canViewInApp: Boolean($(row).find('td:nth-child(3) a').length), + }; + }); + } + + async clickTableSelectAll() { + await testSubjects.click('checkboxSelectAll'); + } + + async canBeDeleted() { + return await testSubjects.isEnabled('savedObjectsManagementDelete'); + } + + async clickDelete() { + await testSubjects.click('savedObjectsManagementDelete'); + await testSubjects.click('confirmModalConfirmButton'); + await this.waitTableIsLoaded(); + } + } + + return new SavedObjectsPage(); +} diff --git a/test/functional/page_objects/settings_page.ts b/test/functional/page_objects/settings_page.ts index f5b4eb7ad5de83..e491cd7e4fe40a 100644 --- a/test/functional/page_objects/settings_page.ts +++ b/test/functional/page_objects/settings_page.ts @@ -29,7 +29,7 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider const flyout = getService('flyout'); const testSubjects = getService('testSubjects'); const comboBox = getService('comboBox'); - const PageObjects = getPageObjects(['header', 'common']); + const PageObjects = getPageObjects(['header', 'common', 'savedObjects']); class SettingsPage { async clickNavigation() { @@ -47,7 +47,7 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider async clickKibanaSavedObjects() { await testSubjects.click('objects'); - await this.waitUntilSavedObjectsTableIsNotLoading(); + await PageObjects.savedObjects.waitTableIsLoaded(); } async clickKibanaIndexPatterns() { @@ -68,13 +68,13 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider async getAdvancedSettings(propertyName: string) { log.debug('in getAdvancedSettings'); - const setting = await testSubjects.find(`advancedSetting-editField-${propertyName}`); - return await setting.getAttribute('value'); + return await testSubjects.getAttribute(`advancedSetting-editField-${propertyName}`, 'value'); } async expectDisabledAdvancedSetting(propertyName: string) { - const setting = await testSubjects.find(`advancedSetting-editField-${propertyName}`); - expect(setting.getAttribute('disabled')).to.eql(''); + expect( + await testSubjects.getAttribute(`advancedSetting-editField-${propertyName}`, 'disabled') + ).to.eql('true'); } async getAdvancedSettingCheckbox(propertyName: string) { @@ -274,9 +274,7 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider } async increasePopularity() { - const field = await testSubjects.find('editorFieldCount'); - await field.clearValueWithKeyboard(); - await field.type('1'); + await testSubjects.setValue('editorFieldCount', '1', { clearWithKeyboard: true }); } async getPopularity() { @@ -499,9 +497,7 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider async setScriptedFieldName(name: string) { log.debug('set scripted field name = ' + name); - const field = await testSubjects.find('editorFieldName'); - await field.clearValue(); - await field.type(name); + await testSubjects.setValue('editorFieldName', name); } async setScriptedFieldLanguage(language: string) { @@ -568,9 +564,7 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider async setScriptedFieldPopularity(popularity: string) { log.debug('set scripted field popularity = ' + popularity); - const field = await testSubjects.find('editorFieldCount'); - await field.clearValue(); - await field.type(popularity); + await testSubjects.setValue('editorFieldCount', popularity); } async setScriptedFieldScript(script: string) { @@ -623,55 +617,6 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider return scriptResults; } - async importFile(path: string, overwriteAll = true) { - log.debug(`importFile(${path})`); - - log.debug(`Clicking importObjects`); - await testSubjects.click('importObjects'); - await PageObjects.common.setFileInputPath(path); - - if (!overwriteAll) { - log.debug(`Toggling overwriteAll`); - await testSubjects.click('importSavedObjectsOverwriteToggle'); - } else { - log.debug(`Leaving overwriteAll alone`); - } - await testSubjects.click('importSavedObjectsImportBtn'); - log.debug(`done importing the file`); - - // Wait for all the saves to happen - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async checkImportSucceeded() { - await testSubjects.existOrFail('importSavedObjectsSuccess', { timeout: 20000 }); - } - - async checkNoneImported() { - await testSubjects.existOrFail('importSavedObjectsSuccessNoneImported', { timeout: 20000 }); - } - - async checkImportConflictsWarning() { - await testSubjects.existOrFail('importSavedObjectsConflictsWarning', { timeout: 20000 }); - } - - async checkImportLegacyWarning() { - await testSubjects.existOrFail('importSavedObjectsLegacyWarning', { timeout: 20000 }); - } - - async checkImportFailedWarning() { - await testSubjects.existOrFail('importSavedObjectsFailedWarning', { timeout: 20000 }); - } - - async clickImportDone() { - await testSubjects.click('importSavedObjectsDoneBtn'); - await this.waitUntilSavedObjectsTableIsNotLoading(); - } - - async clickConfirmChanges() { - await testSubjects.click('importSavedObjectsConfirmBtn'); - } - async clickEditFieldFormat() { await testSubjects.click('editFieldFormat'); } @@ -686,112 +631,6 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider async clickChangeIndexConfirmButton() { await testSubjects.click('changeIndexConfirmButton'); } - - async waitUntilSavedObjectsTableIsNotLoading() { - return retry.try(async () => { - const exists = await find.existsByDisplayedByCssSelector( - '*[data-test-subj="savedObjectsTable"] .euiBasicTable-loading' - ); - if (exists) { - throw new Error('Waiting'); - } - return true; - }); - } - - async getSavedObjectElementsInTable() { - const rows = await testSubjects.findAll('~savedObjectsTableRow'); - return mapAsync(rows, async (row) => { - const checkbox = await row.findByCssSelector('[data-test-subj*="checkboxSelectRow"]'); - // return the object type aria-label="index patterns" - const objectType = await row.findByTestSubject('objectType'); - const titleElement = await row.findByTestSubject('savedObjectsTableRowTitle'); - // not all rows have inspect button - Advanced Settings objects don't - let inspectElement; - const innerHtml = await row.getAttribute('innerHTML'); - if (innerHtml.includes('Inspect')) { - inspectElement = await row.findByTestSubject('savedObjectsTableAction-inspect'); - } else { - inspectElement = null; - } - const relationshipsElement = await row.findByTestSubject( - 'savedObjectsTableAction-relationships' - ); - return { - checkbox, - objectType: await objectType.getAttribute('aria-label'), - titleElement, - title: await titleElement.getVisibleText(), - inspectElement, - relationshipsElement, - }; - }); - } - - async getSavedObjectsInTable() { - const table = await testSubjects.find('savedObjectsTable'); - const cells = await table.findAllByTestSubject('savedObjectsTableRowTitle'); - - const objects = []; - for (const cell of cells) { - objects.push(await cell.getVisibleText()); - } - - return objects; - } - - async getRelationshipFlyout() { - const rows = await testSubjects.findAll('relationshipsTableRow'); - return mapAsync(rows, async (row) => { - const objectType = await row.findByTestSubject('relationshipsObjectType'); - const relationship = await row.findByTestSubject('directRelationship'); - const titleElement = await row.findByTestSubject('relationshipsTitle'); - const inspectElement = await row.findByTestSubject('relationshipsTableAction-inspect'); - return { - objectType: await objectType.getAttribute('aria-label'), - relationship: await relationship.getVisibleText(), - titleElement, - title: await titleElement.getVisibleText(), - inspectElement, - }; - }); - } - - async getSavedObjectsTableSummary() { - const table = await testSubjects.find('savedObjectsTable'); - const rows = await table.findAllByCssSelector('tbody tr'); - - const summary = []; - for (const row of rows) { - const titleCell = await row.findByCssSelector('td:nth-child(3)'); - const title = await titleCell.getVisibleText(); - - const viewInAppButtons = await row.findAllByCssSelector('td:nth-child(3) a'); - const canViewInApp = Boolean(viewInAppButtons.length); - summary.push({ - title, - canViewInApp, - }); - } - - return summary; - } - - async clickSavedObjectsTableSelectAll() { - const checkboxSelectAll = await testSubjects.find('checkboxSelectAll'); - await checkboxSelectAll.click(); - } - - async canSavedObjectsBeDeleted() { - const deleteButton = await testSubjects.find('savedObjectsManagementDelete'); - return await deleteButton.isEnabled(); - } - - async clickSavedObjectsDelete() { - await testSubjects.click('savedObjectsManagementDelete'); - await testSubjects.click('confirmModalConfirmButton'); - await this.waitUntilSavedObjectsTableIsNotLoading(); - } } return new SettingsPage(); diff --git a/test/scripts/jenkins_xpack.sh b/test/scripts/jenkins_xpack.sh index ef7e6526395f66..cfde28621e69a9 100755 --- a/test/scripts/jenkins_xpack.sh +++ b/test/scripts/jenkins_xpack.sh @@ -14,9 +14,9 @@ checks-reporter-with-killswitch "X-Pack Jest" node --max-old-space-size=6144 scr echo "" echo "" -echo " -> Running SIEM cyclic dependency test" +echo " -> Running Security Solution cyclic dependency test" cd "$XPACK_DIR" -checks-reporter-with-killswitch "X-Pack SIEM cyclic dependency test" node plugins/security_solution/scripts/check_circular_deps +checks-reporter-with-killswitch "X-Pack Security Solution cyclic dependency test" node plugins/security_solution/scripts/check_circular_deps echo "" echo "" diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_url_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_url_drilldown/index.tsx index 4810fb2d6ad8da..5e4ba54864461b 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_url_drilldown/index.tsx +++ b/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_url_drilldown/index.tsx @@ -39,6 +39,8 @@ export class DashboardToUrlDrilldown implements Drilldown public readonly order = 8; + readonly minimalLicense = 'gold'; // example of minimal license support + public readonly getDisplayName = () => 'Go to URL (example)'; public readonly euiIcon = 'link'; diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx index f14494a8abc493..4bcb7a7ec8a02e 100644 --- a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx +++ b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx @@ -104,15 +104,15 @@ const getEuiIconType = (suggestionType: QuerySuggestionTypes) => { const getEuiIconColor = (theme: any, suggestionType: QuerySuggestionTypes): string => { switch (suggestionType) { case QuerySuggestionTypes.Field: - return theme.eui.euiColorVis7; + return theme?.eui.euiColorVis7; case QuerySuggestionTypes.Value: - return theme.eui.euiColorVis0; + return theme?.eui.euiColorVis0; case QuerySuggestionTypes.Operator: - return theme.eui.euiColorVis1; + return theme?.eui.euiColorVis1; case QuerySuggestionTypes.Conjunction: - return theme.eui.euiColorVis2; + return theme?.eui.euiColorVis2; case QuerySuggestionTypes.RecentSearch: default: - return theme.eui.euiColorMediumShade; + return theme?.eui.euiColorMediumShade; } }; diff --git a/x-pack/plugins/infra/public/components/logging/log_highlights_menu.tsx b/x-pack/plugins/infra/public/components/logging/log_highlights_menu.tsx index 608a22a79c473c..7beead461cb2e4 100644 --- a/x-pack/plugins/infra/public/components/logging/log_highlights_menu.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_highlights_menu.tsx @@ -166,7 +166,7 @@ const goToNextHighlightLabel = i18n.translate( const ActiveHighlightsIndicator = euiStyled(EuiIcon).attrs(({ theme }) => ({ type: 'checkInCircleFilled', size: 'm', - color: theme.eui.euiColorAccent, + color: theme?.eui.euiColorAccent, }))` padding-left: ${(props) => props.theme.eui.paddingSizes.xs}; `; diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx index f0bc404dc37970..6e3ebee2dcb4b0 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx @@ -11,7 +11,7 @@ import { withTheme, EuiTheme } from '../../../../../../observability/public'; interface Props { label: string; onClick: () => void; - theme: EuiTheme; + theme: EuiTheme | undefined; children: ReactNode; } @@ -21,18 +21,18 @@ export const DropdownButton = withTheme(({ onClick, label, theme, children }: Pr alignItems="center" gutterSize="none" style={{ - border: theme.eui.euiFormInputGroupBorder, - boxShadow: `0px 3px 2px ${theme.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme.eui.euiTableActionsBorderColor}`, + border: theme?.eui.euiFormInputGroupBorder, + boxShadow: `0px 3px 2px ${theme?.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme?.eui.euiTableActionsBorderColor}`, }} > {label} diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx index 4e7bdeddd62468..a785cb31c3cf40 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx @@ -52,7 +52,7 @@ const AGGREGATION_LABELS = { }; interface Props { - theme: EuiTheme; + theme: EuiTheme | undefined; metric?: SnapshotCustomMetricInput; fields: IFieldType[]; customMetrics: SnapshotCustomMetricInput[]; @@ -158,8 +158,8 @@ export const CustomMetricForm = withTheme(
-
+
; onEdit: (metric: SnapshotCustomMetricInput) => void; @@ -28,7 +28,7 @@ export const MetricsEditMode = withTheme(
{options.map((option) => (
- {option.text} + {option.text}
))} {customMetrics.map((metric) => ( diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/mode_switcher.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/mode_switcher.tsx index acb740f1750c8d..d1abcade5d6605 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/mode_switcher.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/mode_switcher.tsx @@ -15,7 +15,7 @@ import { } from '../../../../../../../../../legacy/common/eui_styled_components'; interface Props { - theme: EuiTheme; + theme: EuiTheme | undefined; onEdit: () => void; onAdd: () => void; onSave: () => void; @@ -32,7 +32,7 @@ export const ModeSwitcher = withTheme( return (
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx index 5f526197cbfb9b..e7bee82a9f0fee 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx @@ -152,8 +152,8 @@ const ValueInner = euiStyled.button` border: none; &:focus { outline: none !important; - border: ${(params) => params.theme.eui.euiFocusRingSize} solid - ${(params) => params.theme.eui.euiFocusRingColor}; + border: ${(params) => params.theme?.eui.euiFocusRingSize} solid + ${(params) => params.theme?.eui.euiFocusRingColor}; box-shadow: none; } `; diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx index b5e6aacd0e6f48..a45ac0cee72d97 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx @@ -107,7 +107,7 @@ export const WaffleSortControls = ({ sort, onChange }: Props) => { }; interface SwitchContainerProps { - theme: EuiTheme; + theme: EuiTheme | undefined; children: ReactNode; } @@ -115,8 +115,8 @@ const SwitchContainer = withTheme(({ children, theme }: SwitchContainerProps) => return (
{children} diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx index fac1e086101e98..da044b1cf99ee4 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx @@ -12,7 +12,7 @@ import { withTheme, EuiTheme } from '../../../../../../../observability/public'; import { useWaffleTimeContext } from '../../hooks/use_waffle_time'; interface Props { - theme: EuiTheme; + theme: EuiTheme | undefined; } export const WaffleTimeControls = withTheme(({ theme }: Props) => { @@ -56,9 +56,9 @@ export const WaffleTimeControls = withTheme(({ theme }: Props) => { diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx index 4ae96f733382fc..60c8041fb5ef0f 100644 --- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx @@ -27,7 +27,7 @@ const DetailPageContent = euiStyled(PageContent)` `; interface Props { - theme: EuiTheme; + theme: EuiTheme | undefined; match: { params: { type: string; diff --git a/x-pack/plugins/ingest_manager/common/types/rest_spec/index.ts b/x-pack/plugins/ingest_manager/common/types/rest_spec/index.ts index eb212050ef53ef..294e10aabe4efc 100644 --- a/x-pack/plugins/ingest_manager/common/types/rest_spec/index.ts +++ b/x-pack/plugins/ingest_manager/common/types/rest_spec/index.ts @@ -12,6 +12,7 @@ export * from './fleet_setup'; export * from './epm'; export * from './enrollment_api_key'; export * from './install_script'; +export * from './ingest_setup'; export * from './output'; export * from './settings'; export * from './app'; diff --git a/x-pack/plugins/ingest_manager/common/types/rest_spec/ingest_setup.ts b/x-pack/plugins/ingest_manager/common/types/rest_spec/ingest_setup.ts new file mode 100644 index 00000000000000..17f4023fc8bead --- /dev/null +++ b/x-pack/plugins/ingest_manager/common/types/rest_spec/ingest_setup.ts @@ -0,0 +1,9 @@ +/* + * 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. + */ + +export interface PostIngestSetupResponse { + isInitialized: boolean; +} diff --git a/x-pack/plugins/ingest_manager/public/plugin.ts b/x-pack/plugins/ingest_manager/public/plugin.ts index 554df1d4068493..4a10a26151e780 100644 --- a/x-pack/plugins/ingest_manager/public/plugin.ts +++ b/x-pack/plugins/ingest_manager/public/plugin.ts @@ -14,7 +14,7 @@ import { i18n } from '@kbn/i18n'; import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public'; import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public'; import { LicensingPluginSetup } from '../../licensing/public'; -import { PLUGIN_ID } from '../common/constants'; +import { PLUGIN_ID, CheckPermissionsResponse, PostIngestSetupResponse } from '../common'; import { IngestManagerConfigType } from '../common/types'; import { setupRouteService, appRoutesService } from '../common'; @@ -32,10 +32,7 @@ export interface IngestManagerSetup {} */ export interface IngestManagerStart { registerDatasource: typeof registerDatasource; - success: boolean; - error?: { - message: string; - }; + success: Promise; } export interface IngestManagerSetupDeps { @@ -84,21 +81,29 @@ export class IngestManagerPlugin } public async start(core: CoreStart): Promise { + let successPromise: IngestManagerStart['success']; try { - const permissionsResponse = await core.http.get(appRoutesService.getCheckPermissionsPath()); - if (permissionsResponse.success) { - const { isInitialized: success } = await core.http.post(setupRouteService.getSetupPath()); - return { success, registerDatasource }; + const permissionsResponse = await core.http.get( + appRoutesService.getCheckPermissionsPath() + ); + + if (permissionsResponse?.success) { + successPromise = core.http + .post(setupRouteService.getSetupPath()) + .then(({ isInitialized }) => + isInitialized ? Promise.resolve(true) : Promise.reject(new Error('Unknown setup error')) + ); } else { - throw new Error(permissionsResponse.error); + throw new Error(permissionsResponse?.error || 'Unknown permissions error'); } } catch (error) { - return { - success: false, - error: { message: error.body?.message || 'Unknown error' }, - registerDatasource, - }; + successPromise = Promise.reject(error); } + + return { + success: successPromise, + registerDatasource, + }; } public stop() {} diff --git a/x-pack/plugins/ingest_manager/server/routes/setup/handlers.ts b/x-pack/plugins/ingest_manager/server/routes/setup/handlers.ts index 98083434173908..1daa63800f4ee5 100644 --- a/x-pack/plugins/ingest_manager/server/routes/setup/handlers.ts +++ b/x-pack/plugins/ingest_manager/server/routes/setup/handlers.ts @@ -6,7 +6,7 @@ import { RequestHandler } from 'src/core/server'; import { TypeOf } from '@kbn/config-schema'; import { outputService, appContextService } from '../../services'; -import { GetFleetStatusResponse } from '../../../common'; +import { GetFleetStatusResponse, PostIngestSetupResponse } from '../../../common'; import { setupIngestManager, setupFleet } from '../../services/setup'; import { PostFleetSetupRequestSchema } from '../../types'; import { IngestManagerError, getHTTPResponseCode } from '../../errors'; @@ -83,9 +83,10 @@ export const ingestManagerSetupHandler: RequestHandler = async (context, request const callCluster = context.core.elasticsearch.legacy.client.callAsCurrentUser; const logger = appContextService.getLogger(); try { + const body: PostIngestSetupResponse = { isInitialized: true }; await setupIngestManager(soClient, callCluster); return response.ok({ - body: { isInitialized: true }, + body, }); } catch (e) { if (e instanceof IngestManagerError) { diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx index ec065a74abca00..05c9f0a08b0c72 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx @@ -81,6 +81,7 @@ export const PipelineForm: React.FunctionComponent = ({ }); const onEditorFlyoutOpen = useCallback(() => { + setIsTestingPipeline(false); setIsRequestVisible(false); }, [setIsRequestVisible]); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx index 320ccd0cbe8c0d..7ad9aed3c44a46 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx @@ -24,8 +24,15 @@ jest.mock('@elastic/eui', () => { }} /> ), - // Mocking EuiCodeEditor, which uses React Ace under the hood - EuiCodeEditor: (props: any) => ( + }; +}); + +jest.mock('../../../../../../../../src/plugins/kibana_react/public', () => { + const original = jest.requireActual('../../../../../../../../src/plugins/kibana_react/public'); + return { + ...original, + // Mocking CodeEditor, which uses React Monaco under the hood + CodeEditor: (props: any) => ( ) => { act(() => { find(`${processorSelector}.moveItemButton`).simulate('click'); }); + component.update(); act(() => { - find(dropZoneSelector).last().simulate('click'); + find(dropZoneSelector).simulate('click'); }); component.update(); }, @@ -122,13 +130,6 @@ const createActions = (testBed: TestBed) => { }); }, - duplicateProcessor(processorSelector: string) { - find(`${processorSelector}.moreMenu.button`).simulate('click'); - act(() => { - find(`${processorSelector}.moreMenu.duplicateButton`).simulate('click'); - }); - }, - startAndCancelMove(processorSelector: string) { act(() => { find(`${processorSelector}.moveItemButton`).simulate('click'); @@ -139,6 +140,13 @@ const createActions = (testBed: TestBed) => { }); }, + duplicateProcessor(processorSelector: string) { + find(`${processorSelector}.moreMenu.button`).simulate('click'); + act(() => { + find(`${processorSelector}.moreMenu.duplicateButton`).simulate('click'); + }); + }, + toggleOnFailure() { find('pipelineEditorOnFailureToggle').simulate('click'); }, diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/_shared.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/_shared.scss new file mode 100644 index 00000000000000..8d17a3970d94f8 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/_shared.scss @@ -0,0 +1,2 @@ +$dropZoneZIndex: 1; /* Prevent the next item down from obscuring the button */ +$cancelButtonZIndex: 2; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx index 6451096c897d74..251a2ffe952127 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx @@ -31,7 +31,7 @@ export const OnFailureProcessorsTitle: FunctionComponent = () => { void; onDelete: () => void; @@ -20,9 +22,13 @@ interface Props { } export const ContextMenu: FunctionComponent = (props) => { - const { showAddOnFailure, onDuplicate, onAddOnFailure, onDelete, disabled } = props; + const { showAddOnFailure, onDuplicate, onAddOnFailure, onDelete, disabled, hidden } = props; const [isOpen, setIsOpen] = useState(false); + const containerClasses = classNames({ + 'pipelineProcessorsEditor__item--displayNone': hidden, + }); + const contextMenuItems = [ = (props) => { ].filter(Boolean) as JSX.Element[]; return ( - setIsOpen(false)} - button={ - setIsOpen((v) => !v)} - iconType="boxesHorizontal" - aria-label={editorItemMessages.moreButtonAriaLabel} - /> - } - > - - +
+ setIsOpen(false)} + button={ + setIsOpen((v) => !v)} + iconType="boxesHorizontal" + aria-label={editorItemMessages.moreButtonAriaLabel} + /> + } + > + + +
); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx index e0b67bc907ca9b..00ac8d4f6d729a 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx @@ -3,7 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ - +import classNames from 'classnames'; import React, { FunctionComponent, useState, useEffect, useCallback } from 'react'; import { EuiFieldText, EuiText, keyCodes } from '@elastic/eui'; @@ -11,10 +11,12 @@ export interface Props { placeholder: string; ariaLabel: string; onChange: (value: string) => void; + disabled: boolean; text?: string; } export const InlineTextInput: FunctionComponent = ({ + disabled, placeholder, text, ariaLabel, @@ -23,26 +25,17 @@ export const InlineTextInput: FunctionComponent = ({ const [isShowingTextInput, setIsShowingTextInput] = useState(false); const [textValue, setTextValue] = useState(text ?? ''); - const content = isShowingTextInput ? ( - el?.focus()} - onChange={(event) => setTextValue(event.target.value)} - /> - ) : ( - - {text || {placeholder}} - - ); + const containerClasses = classNames('pipelineProcessorsEditor__item__textContainer', { + 'pipelineProcessorsEditor__item__textContainer--notEditing': !isShowingTextInput && !disabled, + }); const submitChange = useCallback(() => { - setIsShowingTextInput(false); - onChange(textValue); + // Give any on blur handlers the chance to complete if the user is + // tabbing over this component. + setTimeout(() => { + setIsShowingTextInput(false); + onChange(textValue); + }); }, [setIsShowingTextInput, onChange, textValue]); useEffect(() => { @@ -62,14 +55,27 @@ export const InlineTextInput: FunctionComponent = ({ }; }, [isShowingTextInput, submitChange, setIsShowingTextInput]); - return ( -
setIsShowingTextInput(true)} - onBlur={submitChange} - > - {content} + return isShowingTextInput && !disabled ? ( +
+ el?.focus()} + onChange={(event) => setTextValue(event.target.value)} + /> +
+ ) : ( +
setIsShowingTextInput(true)}> + +
+ {text || {placeholder}} +
+
); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts index 67dbf2708d6656..913902d2955030 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts @@ -10,12 +10,9 @@ export const editorItemMessages = { moveButtonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.item.moveButtonLabel', { defaultMessage: 'Move this processor', }), - editorButtonLabel: i18n.translate( - 'xpack.ingestPipelines.pipelineEditor.item.editButtonAriaLabel', - { - defaultMessage: 'Edit this processor', - } - ), + editButtonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.item.editButtonAriaLabel', { + defaultMessage: 'Edit this processor', + }), duplicateButtonLabel: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.item.moreMenu.duplicateButtonLabel', { @@ -31,7 +28,7 @@ export const editorItemMessages = { cancelMoveButtonLabel: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.item.cancelMoveButtonAriaLabel', { - defaultMessage: 'Cancel moving this processor', + defaultMessage: 'Cancel move', } ), deleteButtonLabel: i18n.translate( diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss index a17e644853847b..6b5e1180846063 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss @@ -1,17 +1,57 @@ +@import '../shared'; + .pipelineProcessorsEditor__item { + transition: border-color 1s; + min-height: 50px; + &--selected { + border: 1px solid $euiColorPrimary; + } + + &--displayNone { + display: none; + } + + &--dimmed { + box-shadow: none; + } + + // Remove the box-shadow on all nested items + .pipelineProcessorsEditor__item { + box-shadow: none !important; + } + + &__processorTypeLabel { + line-height: $euiButtonHeightSmall; + } + &__textContainer { padding: 4px; border-radius: 2px; - transition: border-color .3s; - border: 2px solid #FFF; + transition: border-color 0.3s; + border: 2px solid transparent; - &:hover { - border: 2px solid $euiColorLightShade; + &--notEditing { + &:hover { + border: 2px solid $euiColorLightShade; + } } } + + &__description { + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; + max-width: 600px; + } + &__textInput { height: 21px; - min-width: 100px; + min-width: 150px; + } + + &__cancelMoveButton { + // Ensure that the cancel button is above the drop zones + z-index: $cancelButtonZIndex; } } diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx index 0eb259db75f47c..0fe804adaeb48e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx @@ -4,8 +4,17 @@ * you may not use this file except in compliance with the Elastic License. */ +import classNames from 'classnames'; import React, { FunctionComponent, memo } from 'react'; -import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui'; +import { + EuiButtonIcon, + EuiButton, + EuiFlexGroup, + EuiFlexItem, + EuiPanel, + EuiText, + EuiToolTip, +} from '@elastic/eui'; import { ProcessorInternal, ProcessorSelector } from '../../types'; import { selectorToDataTestSubject } from '../../utils'; @@ -17,6 +26,7 @@ import './pipeline_processors_editor_item.scss'; import { InlineTextInput } from './inline_text_input'; import { ContextMenu } from './context_menu'; import { editorItemMessages } from './messages'; +import { ProcessorInfo } from '../processors_tree'; export interface Handlers { onMove: () => void; @@ -25,127 +35,166 @@ export interface Handlers { export interface Props { processor: ProcessorInternal; - selected: boolean; handlers: Handlers; selector: ProcessorSelector; description?: string; + movingProcessor?: ProcessorInfo; + renderOnFailureHandlers?: () => React.ReactNode; } export const PipelineProcessorsEditorItem: FunctionComponent = memo( - ({ processor, description, handlers: { onCancelMove, onMove }, selector, selected }) => { + ({ + processor, + description, + handlers: { onCancelMove, onMove }, + selector, + movingProcessor, + renderOnFailureHandlers, + }) => { const { state: { editor, processorsDispatch }, } = usePipelineProcessorsContext(); - const disabled = editor.mode.id !== 'idle'; - const isDarkBold = - editor.mode.id !== 'editingProcessor' || processor.id === editor.mode.arg.processor.id; + const isDisabled = editor.mode.id !== 'idle'; + const isInMoveMode = Boolean(movingProcessor); + const isMovingThisProcessor = processor.id === movingProcessor?.id; + const isEditingThisProcessor = + editor.mode.id === 'editingProcessor' && processor.id === editor.mode.arg.processor.id; + const isEditingOtherProcessor = + editor.mode.id === 'editingProcessor' && !isEditingThisProcessor; + const isMovingOtherProcessor = editor.mode.id === 'movingProcessor' && !isMovingThisProcessor; + const isDimmed = isEditingOtherProcessor || isMovingOtherProcessor; + + const panelClasses = classNames('pipelineProcessorsEditor__item', { + 'pipelineProcessorsEditor__item--selected': isMovingThisProcessor || isEditingThisProcessor, + 'pipelineProcessorsEditor__item--dimmed': isDimmed, + }); + + const actionElementClasses = classNames({ + 'pipelineProcessorsEditor__item--displayNone': isInMoveMode, + }); + + const inlineTextInputContainerClasses = classNames({ + 'pipelineProcessorsEditor__item--displayNone': isInMoveMode && !processor.options.description, + }); + + const cancelMoveButtonClasses = classNames('pipelineProcessorsEditor__item__cancelMoveButton', { + 'pipelineProcessorsEditor__item--displayNone': !isMovingThisProcessor, + }); return ( - - - - - - {processor.type} - - - - { - let nextOptions: Record; - if (!nextDescription) { - const { description: __, ...restOptions } = processor.options; - nextOptions = restOptions; - } else { - nextOptions = { - ...processor.options, - description: nextDescription, - }; - } - processorsDispatch({ - type: 'updateProcessor', - payload: { - processor: { - ...processor, - options: nextOptions, + + + + + + + {processor.type} + + + + { + let nextOptions: Record; + if (!nextDescription) { + const { description: __, ...restOptions } = processor.options; + nextOptions = restOptions; + } else { + nextOptions = { + ...processor.options, + description: nextDescription, + }; + } + processorsDispatch({ + type: 'updateProcessor', + payload: { + processor: { + ...processor, + options: nextOptions, + }, + selector, }, - selector, - }, - }); - }} - ariaLabel={editorItemMessages.processorTypeLabel({ type: processor.type })} - text={description} - placeholder={editorItemMessages.descriptionPlaceholder} - /> - - - { - editor.setMode({ - id: 'editingProcessor', - arg: { processor, selector }, - }); - }} - /> - - - {selected ? ( - - ) : ( - - - - )} - - - - - { - editor.setMode({ id: 'creatingProcessor', arg: { selector } }); - }} - onDelete={() => { - editor.setMode({ id: 'removingProcessor', arg: { selector } }); - }} - onDuplicate={() => { - processorsDispatch({ - type: 'duplicateProcessor', - payload: { - source: selector, - }, - }); - }} - /> - - + + + {!isInMoveMode && ( + + { + editor.setMode({ + id: 'editingProcessor', + arg: { processor, selector }, + }); + }} + /> + + )} + + + {!isInMoveMode && ( + + + + )} + + + + {editorItemMessages.cancelMoveButtonLabel} + + + + + + + + {renderOnFailureHandlers && renderOnFailureHandlers()} + ); } ); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/index.ts new file mode 100644 index 00000000000000..6f7b55a3ea4b02 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/index.ts @@ -0,0 +1,7 @@ +/* + * 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. + */ + +export { OnXJsonEditorUpdateHandler, XJsonEditor } from './xjson_editor'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/xjson_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/xjson_editor.tsx new file mode 100644 index 00000000000000..a8456ad0ffd72c --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/xjson_editor.tsx @@ -0,0 +1,66 @@ +/* + * 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 { EuiPanel } from '@elastic/eui'; +import { XJsonLang } from '@kbn/monaco'; +import React, { FunctionComponent, useCallback } from 'react'; +import { EuiFormRow } from '@elastic/eui'; +import { + CodeEditor, + FieldHook, + getFieldValidityAndErrorMessage, + Monaco, +} from '../../../../../../shared_imports'; + +export type OnXJsonEditorUpdateHandler = (arg: { + data: { + raw: string; + format(): T; + }; + validate(): boolean; + isValid: boolean | undefined; +}) => void; + +interface Props { + field: FieldHook; + editorProps: { [key: string]: any }; +} + +export const XJsonEditor: FunctionComponent = ({ field, editorProps }) => { + const { value, helpText, setValue, label } = field; + const { xJson, setXJson, convertToJson } = Monaco.useXJsonMode(value); + const { errorMessage } = getFieldValidityAndErrorMessage(field); + + const onChange = useCallback( + (s) => { + setXJson(s); + setValue(convertToJson(s)); + }, + [setValue, setXJson, convertToJson] + ); + return ( + + + { + XJsonLang.registerGrammarChecker(m); + }} + options={{ minimap: { enabled: false } }} + onChange={onChange} + {...(editorProps as any)} + /> + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx index 84dfce64f602b7..9d284748a3d151 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx @@ -18,26 +18,32 @@ import { EuiFlexItem, } from '@elastic/eui'; -import { Form, useForm, FormDataProvider } from '../../../../../shared_imports'; +import { Form, FormDataProvider, FormHook } from '../../../../../shared_imports'; import { usePipelineProcessorsContext } from '../../context'; import { ProcessorInternal } from '../../types'; import { DocumentationButton } from './documentation_button'; -import { ProcessorSettingsFromOnSubmitArg } from './processor_settings_form.container'; import { getProcessorFormDescriptor } from './map_processor_type_to_form'; import { CommonProcessorFields, ProcessorTypeField } from './processors/common_fields'; import { Custom } from './processors/custom'; -export type OnSubmitHandler = (processor: ProcessorSettingsFromOnSubmitArg) => void; - export interface Props { isOnFailure: boolean; processor?: ProcessorInternal; - form: ReturnType['form']; + form: FormHook; onClose: () => void; onOpen: () => void; } +const updateButtonLabel = i18n.translate( + 'xpack.ingestPipelines.settingsFormOnFailureFlyout.updateButtonLabel', + { defaultMessage: 'Update' } +); +const addButtonLabel = i18n.translate( + 'xpack.ingestPipelines.settingsFormOnFailureFlyout.addButtonLabel', + { defaultMessage: 'Add' } +); + export const ProcessorSettingsForm: FunctionComponent = memo( ({ processor, form, isOnFailure, onClose, onOpen }) => { const { @@ -123,10 +129,7 @@ export const ProcessorSettingsForm: FunctionComponent = memo( <> {formContent} - {i18n.translate( - 'xpack.ingestPipelines.pipelineEditor.settingsForm.submitButtonLabel', - { defaultMessage: 'Submit' } - )} + {processor ? updateButtonLabel : addButtonLabel} ); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx index 4d8634e6f28550..82fdc81e0a843e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx @@ -12,15 +12,16 @@ import { FIELD_TYPES, fieldValidators, UseField, - JsonEditorField, } from '../../../../../../shared_imports'; const { emptyField, isJsonField } = fieldValidators; +import { XJsonEditor } from '../field_components'; + const customConfig: FieldConfig = { type: FIELD_TYPES.TEXT, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldLabel', { - defaultMessage: 'Configuration options', + defaultMessage: 'Configuration', }), serializer: (value: string) => { try { @@ -42,7 +43,7 @@ const customConfig: FieldConfig = { i18n.translate( 'xpack.ingestPipelines.pipelineEditor.customForm.configurationRequiredError', { - defaultMessage: 'Configuration options are required.', + defaultMessage: 'Configuration is required.', } ) ), @@ -71,17 +72,17 @@ export const Custom: FunctionComponent = ({ defaultOptions }) => { return ( ) => void; 'data-test-subj'?: string; } -const MOVE_HERE_LABEL = i18n.translate('xpack.ingestPipelines.pipelineEditor.moveTargetLabel', { - defaultMessage: 'Move here', -}); +const moveHereLabel = i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dropZoneButton.moveHereToolTip', + { + defaultMessage: 'Move here', + } +); + +const cannotMoveHereLabel = i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dropZoneButton.unavailableToolTip', + { defaultMessage: 'Cannot move here' } +); export const DropZoneButton: FunctionComponent = (props) => { - const { onClick, isDisabled } = props; + const { onClick, isDisabled, isVisible } = props; + const isUnavailable = isVisible && isDisabled; const containerClasses = classNames({ - 'pipelineProcessorsEditor__tree__dropZoneContainer--active': !isDisabled, + 'pipelineProcessorsEditor__tree__dropZoneContainer--visible': isVisible, + 'pipelineProcessorsEditor__tree__dropZoneContainer--unavailable': isUnavailable, }); const buttonClasses = classNames({ - 'pipelineProcessorsEditor__tree__dropZoneButton--active': !isDisabled, + 'pipelineProcessorsEditor__tree__dropZoneButton--visible': isVisible, + 'pipelineProcessorsEditor__tree__dropZoneButton--unavailable': isUnavailable, }); - return ( - + const content = ( +
{} : onClick} iconType="empty" /> - +
+ ); + + return isUnavailable ? ( + + {content} + + ) : ( + content ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx index 661bde1aa8b359..89407fd4366d8f 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx @@ -78,46 +78,50 @@ export const PrivateTree: FunctionComponent = ({ return ( <> {idx === 0 ? ( + + { + event.preventDefault(); + onAction({ + type: 'move', + payload: { + destination: selector.concat(DropSpecialLocations.top), + source: movingProcessor!.selector, + }, + }); + }} + isVisible={Boolean(movingProcessor)} + isDisabled={!movingProcessor || isDropZoneAboveDisabled(info, movingProcessor)} + /> + + ) : undefined} + + + + { event.preventDefault(); onAction({ type: 'move', payload: { - destination: selector.concat(DropSpecialLocations.top), + destination: selector.concat(String(idx + 1)), source: movingProcessor!.selector, }, }); }} - isDisabled={Boolean( - !movingProcessor || isDropZoneAboveDisabled(info, movingProcessor!) - )} - /> - ) : undefined} - - - { - event.preventDefault(); - onAction({ - type: 'move', - payload: { - destination: selector.concat(String(idx + 1)), - source: movingProcessor!.selector, - }, - }); - }} - /> ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx index a396a7f4d5ecd5..2e3f39ef1d3ac8 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx @@ -5,9 +5,8 @@ */ import React, { FunctionComponent, useMemo } from 'react'; -import classNames from 'classnames'; import { i18n } from '@kbn/i18n'; -import { EuiPanel, EuiText } from '@elastic/eui'; +import { EuiText } from '@elastic/eui'; import { ProcessorInternal } from '../../../types'; @@ -47,40 +46,21 @@ export const TreeNode: FunctionComponent = ({ }; }, [onAction, stringSelector, processor]); // eslint-disable-line react-hooks/exhaustive-deps - const selected = movingProcessor?.id === processor.id; - - const panelClasses = classNames({ - 'pipelineProcessorsEditor__tree__item--selected': selected, - }); - const renderOnFailureHandlersTree = () => { if (!processor.onFailure?.length) { return; } - const onFailureHandlerLabelClasses = classNames({ - 'pipelineProcessorsEditor__tree__onFailureHandlerLabel--withDropZone': - movingProcessor != null && - movingProcessor.id !== processor.onFailure[0].id && - movingProcessor.id !== processor.id, - }); - return (
-
- - {i18n.translate('xpack.ingestPipelines.pipelineEditor.onFailureProcessorsLabel', { - defaultMessage: 'Failure handlers', - })} - -
+ + {i18n.translate('xpack.ingestPipelines.pipelineEditor.onFailureProcessorsLabel', { + defaultMessage: 'Failure handlers', + })} + = ({ }; return ( - - - {renderOnFailureHandlersTree()} - + ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss index ad9058cea5e186..2feb71f21a4f5e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss @@ -1,61 +1,61 @@ @import '@elastic/eui/src/global_styling/variables/size'; +@import '../shared'; .pipelineProcessorsEditor__tree { - &__container { background-color: $euiColorLightestShade; padding: $euiSizeS; } &__dropZoneContainer { + position: relative; margin: 2px; visibility: hidden; - border: 2px dashed $euiColorLightShade; - height: 12px; - border-radius: 2px; - - transition: border .5s; + background-color: transparent; + height: 2px; - &--active { + &--visible { &:hover { - border: 2px dashed $euiColorPrimary; + background-color: $euiColorPrimary; } visibility: visible; } + + &--unavailable { + &:hover { + background-color: $euiColorMediumShade; + } + } + + &__toolTip { + pointer-events: none; + } } + $dropZoneButtonHeight: 60px; + $dropZoneButtonOffsetY: $dropZoneButtonHeight * -0.5; &__dropZoneButton { - height: 8px; + position: absolute; + padding: 0; + height: $dropZoneButtonHeight; + margin-top: $dropZoneButtonOffsetY; + width: 100%; opacity: 0; text-decoration: none !important; + z-index: $dropZoneZIndex; - &--active { + &--visible { + pointer-events: visible !important; &:hover { transform: none !important; } } - &:disabled { - cursor: default !important; - & > * { - cursor: default !important; - } + &--unavailable { + cursor: not-allowed !important; } } - &__onFailureHandlerLabelContainer { - position: relative; - height: 14px; - } - &__onFailureHandlerLabel { - position: absolute; - bottom: -16px; - &--withDropZone { - bottom: -4px; - } - } - - &__onFailureHandlerContainer { margin-top: $euiSizeS; margin-bottom: $euiSizeS; @@ -63,12 +63,4 @@ overflow: visible; } } - - &__item { - transition: border-color 1s; - min-height: 50px; - &--selected { - border: 1px solid $euiColorPrimary; - } - } } diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/utils.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/utils.ts index 457e335602b9b2..6f8681b38fc7a3 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/utils.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/utils.ts @@ -13,9 +13,9 @@ import { ProcessorInternal } from '../../types'; // - ./components/drop_zone_button.tsx // - ./components/pipeline_processors_editor_item.tsx const itemHeightsPx = { - WITHOUT_NESTED_ITEMS: 67, + WITHOUT_NESTED_ITEMS: 57, WITH_NESTED_ITEMS: 137, - TOP_PADDING: 16, + TOP_PADDING: 6, }; export const calculateItemHeight = ({ diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss index ee7421d7dbfa8c..73eb54827e04fb 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss @@ -1,3 +1,3 @@ .pipelineProcessorsEditor { - margin-bottom: $euiSize; + margin-bottom: $euiSizeXL; } diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx index b64f77f582b3af..09e77c5107754b 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx @@ -175,7 +175,7 @@ export const PipelineProcessorsEditor: FunctionComponent = memo( /> - + diff --git a/x-pack/plugins/ingest_pipelines/public/application/index.tsx b/x-pack/plugins/ingest_pipelines/public/application/index.tsx index a8e6febeb2e591..6ffebd1854b786 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/index.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/index.tsx @@ -7,7 +7,7 @@ import { HttpSetup } from 'kibana/public'; import React, { ReactNode } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; -import { NotificationsSetup } from 'kibana/public'; +import { NotificationsSetup, IUiSettingsClient } from 'kibana/public'; import { ManagementAppMountParams } from 'src/plugins/management/public'; import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public'; @@ -25,6 +25,7 @@ export interface AppServices { api: ApiService; notifications: NotificationsSetup; history: ManagementAppMountParams['history']; + uiSettings: IUiSettingsClient; } export interface CoreServices { diff --git a/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts b/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts index 49c8f5a7b2e1e4..16ba9f9cd7a12c 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts @@ -30,6 +30,7 @@ export async function mountManagementSection( api: apiService, notifications, history, + uiSettings: coreStart.uiSettings, }; return renderApp(element, I18nContext, services, { http }); diff --git a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts index 9ddb953c719789..05e7d1e41c5fab 100644 --- a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts +++ b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts @@ -3,9 +3,11 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import { useKibana as _useKibana } from '../../../../src/plugins/kibana_react/public'; +import { useKibana as _useKibana, CodeEditor } from '../../../../src/plugins/kibana_react/public'; import { AppServices } from './application'; +export { CodeEditor }; + export { AuthorizationProvider, Error, @@ -19,6 +21,7 @@ export { useRequest, UseRequestConfig, WithPrivileges, + Monaco, } from '../../../../src/plugins/es_ui_shared/public/'; export { @@ -36,6 +39,8 @@ export { FormDataProvider, OnFormUpdateArg, FieldConfig, + FieldHook, + getFieldValidityAndErrorMessage, } from '../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib'; export { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts index 5e59627d8c3353..e8c8c5762bb833 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts +++ b/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts @@ -317,7 +317,6 @@ describe('loader', () => { a: sampleIndexPatterns.a, }, layers: {}, - showEmptyFields: false, }); expect(storage.set).toHaveBeenCalledWith('lens-settings', { indexPatternId: 'a', @@ -340,7 +339,6 @@ describe('loader', () => { b: sampleIndexPatterns.b, }, layers: {}, - showEmptyFields: false, }); }); diff --git a/x-pack/plugins/licensing/public/mocks.ts b/x-pack/plugins/licensing/public/mocks.ts index 68b280c5341f26..8421a343d91ca8 100644 --- a/x-pack/plugins/licensing/public/mocks.ts +++ b/x-pack/plugins/licensing/public/mocks.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ import { BehaviorSubject } from 'rxjs'; -import { LicensingPluginSetup } from './types'; +import { LicensingPluginSetup, LicensingPluginStart } from './types'; import { licenseMock } from '../common/licensing.mock'; const createSetupMock = () => { @@ -18,7 +18,19 @@ const createSetupMock = () => { return mock; }; +const createStartMock = () => { + const license = licenseMock.createLicense(); + const mock: jest.Mocked = { + license$: new BehaviorSubject(license), + refresh: jest.fn(), + }; + mock.refresh.mockResolvedValue(license); + + return mock; +}; + export const licensingMock = { createSetup: createSetupMock, + createStart: createStartMock, ...licenseMock, }; diff --git a/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.test.ts b/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.test.ts index ccafe70406ecb7..34551b74d8c9ff 100644 --- a/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.test.ts +++ b/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.test.ts @@ -8,6 +8,9 @@ import { left } from 'fp-ts/lib/Either'; import { pipe } from 'fp-ts/lib/pipeable'; import { exactCheck, foldLeftRight, getPaths } from '../../siem_common_deps'; +import { getCreateCommentsArrayMock } from '../types/create_comments.mock'; +import { getCommentsMock } from '../types/comments.mock'; +import { CommentsArray } from '../types'; import { CreateExceptionListItemSchema, @@ -26,7 +29,7 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual(payload); }); - test('it should not accept an undefined for "description"', () => { + test('it should not validate an undefined for "description"', () => { const payload = getCreateExceptionListItemSchemaMock(); delete payload.description; const decoded = createExceptionListItemSchema.decode(payload); @@ -38,7 +41,7 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual({}); }); - test('it should not accept an undefined for "name"', () => { + test('it should not validate an undefined for "name"', () => { const payload = getCreateExceptionListItemSchemaMock(); delete payload.name; const decoded = createExceptionListItemSchema.decode(payload); @@ -50,7 +53,7 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual({}); }); - test('it should not accept an undefined for "type"', () => { + test('it should not validate an undefined for "type"', () => { const payload = getCreateExceptionListItemSchemaMock(); delete payload.type; const decoded = createExceptionListItemSchema.decode(payload); @@ -62,7 +65,7 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual({}); }); - test('it should not accept an undefined for "list_id"', () => { + test('it should not validate an undefined for "list_id"', () => { const inputPayload = getCreateExceptionListItemSchemaMock(); delete inputPayload.list_id; const decoded = createExceptionListItemSchema.decode(inputPayload); @@ -74,7 +77,7 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual({}); }); - test('it should accept an undefined for "meta" but strip it out and generate a correct body not counting the auto generated uuid', () => { + test('it should validate an undefined for "meta" but strip it out and generate a correct body not counting the auto generated uuid', () => { const payload = getCreateExceptionListItemSchemaMock(); const outputPayload = getCreateExceptionListItemSchemaMock(); delete payload.meta; @@ -87,7 +90,7 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual(outputPayload); }); - test('it should accept an undefined for "comments" but return an array and generate a correct body not counting the auto generated uuid', () => { + test('it should validate an undefined for "comments" but return an array and generate a correct body not counting the auto generated uuid', () => { const inputPayload = getCreateExceptionListItemSchemaMock(); const outputPayload = getCreateExceptionListItemSchemaMock(); delete inputPayload.comments; @@ -100,7 +103,34 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual(outputPayload); }); - test('it should accept an undefined for "entries" but return an array', () => { + test('it should validate "comments" array', () => { + const inputPayload = { + ...getCreateExceptionListItemSchemaMock(), + comments: getCreateCommentsArrayMock(), + }; + const decoded = createExceptionListItemSchema.decode(inputPayload); + const checked = exactCheck(inputPayload, decoded); + const message = pipe(checked, foldLeftRight); + delete (message.schema as CreateExceptionListItemSchema).item_id; + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(inputPayload); + }); + + test('it should NOT validate "comments" with "created_at" or "created_by" values', () => { + const inputPayload: Omit & { + comments?: CommentsArray; + } = { + ...getCreateExceptionListItemSchemaMock(), + comments: [getCommentsMock()], + }; + const decoded = createExceptionListItemSchema.decode(inputPayload); + const checked = exactCheck(inputPayload, decoded); + const message = pipe(checked, foldLeftRight); + expect(getPaths(left(message.errors))).toEqual(['invalid keys "created_at,created_by"']); + expect(message.schema).toEqual({}); + }); + + test('it should validate an undefined for "entries" but return an array', () => { const inputPayload = getCreateExceptionListItemSchemaMock(); const outputPayload = getCreateExceptionListItemSchemaMock(); delete inputPayload.entries; @@ -113,7 +143,7 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual(outputPayload); }); - test('it should accept an undefined for "namespace_type" but return enum "single" and generate a correct body not counting the auto generated uuid', () => { + test('it should validate an undefined for "namespace_type" but return enum "single" and generate a correct body not counting the auto generated uuid', () => { const inputPayload = getCreateExceptionListItemSchemaMock(); const outputPayload = getCreateExceptionListItemSchemaMock(); delete inputPayload.namespace_type; @@ -126,7 +156,7 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual(outputPayload); }); - test('it should accept an undefined for "tags" but return an array and generate a correct body not counting the auto generated uuid', () => { + test('it should validate an undefined for "tags" but return an array and generate a correct body not counting the auto generated uuid', () => { const inputPayload = getCreateExceptionListItemSchemaMock(); const outputPayload = getCreateExceptionListItemSchemaMock(); delete inputPayload.tags; @@ -139,7 +169,7 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual(outputPayload); }); - test('it should accept an undefined for "_tags" but return an array and generate a correct body not counting the auto generated uuid', () => { + test('it should validate an undefined for "_tags" but return an array and generate a correct body not counting the auto generated uuid', () => { const inputPayload = getCreateExceptionListItemSchemaMock(); const outputPayload = getCreateExceptionListItemSchemaMock(); delete inputPayload._tags; @@ -152,7 +182,7 @@ describe('create_exception_list_item_schema', () => { expect(message.schema).toEqual(outputPayload); }); - test('it should accept an undefined for "item_id" and auto generate a uuid', () => { + test('it should validate an undefined for "item_id" and auto generate a uuid', () => { const inputPayload = getCreateExceptionListItemSchemaMock(); delete inputPayload.item_id; const decoded = createExceptionListItemSchema.decode(inputPayload); @@ -164,7 +194,7 @@ describe('create_exception_list_item_schema', () => { ); }); - test('it should accept an undefined for "item_id" and generate a correct body not counting the uuid', () => { + test('it should validate an undefined for "item_id" and generate a correct body not counting the uuid', () => { const inputPayload = getCreateExceptionListItemSchemaMock(); delete inputPayload.item_id; const decoded = createExceptionListItemSchema.decode(inputPayload); diff --git a/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.ts b/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.ts index f593b5d1640355..fb452ac89576d9 100644 --- a/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.ts +++ b/x-pack/plugins/lists/common/schemas/request/create_exception_list_item_schema.ts @@ -23,7 +23,7 @@ import { tags, } from '../common/schemas'; import { Identity, RequiredKeepUndefined } from '../../types'; -import { CommentsPartialArray, DefaultCommentsPartialArray, DefaultEntryArray } from '../types'; +import { CreateCommentsArray, DefaultCreateCommentsArray, DefaultEntryArray } from '../types'; import { EntriesArray } from '../types/entries'; import { DefaultUuid } from '../../siem_common_deps'; @@ -39,7 +39,7 @@ export const createExceptionListItemSchema = t.intersection([ t.exact( t.partial({ _tags, // defaults to empty array if not set during decode - comments: DefaultCommentsPartialArray, // defaults to empty array if not set during decode + comments: DefaultCreateCommentsArray, // defaults to empty array if not set during decode entries: DefaultEntryArray, // defaults to empty array if not set during decode item_id: DefaultUuid, // defaults to GUID (uuid v4) if not set during decode meta, // defaults to undefined if not set during decode @@ -63,7 +63,7 @@ export type CreateExceptionListItemSchemaDecoded = Identity< '_tags' | 'tags' | 'item_id' | 'entries' | 'namespace_type' | 'comments' > & { _tags: _Tags; - comments: CommentsPartialArray; + comments: CreateCommentsArray; tags: Tags; item_id: ItemId; entries: EntriesArray; diff --git a/x-pack/plugins/lists/common/schemas/request/update_exception_list_item_schema.ts b/x-pack/plugins/lists/common/schemas/request/update_exception_list_item_schema.ts index c32b15fecb571e..582fabdc160f9e 100644 --- a/x-pack/plugins/lists/common/schemas/request/update_exception_list_item_schema.ts +++ b/x-pack/plugins/lists/common/schemas/request/update_exception_list_item_schema.ts @@ -23,10 +23,10 @@ import { } from '../common/schemas'; import { Identity, RequiredKeepUndefined } from '../../types'; import { - CommentsPartialArray, - DefaultCommentsPartialArray, DefaultEntryArray, + DefaultUpdateCommentsArray, EntriesArray, + UpdateCommentsArray, } from '../types'; export const updateExceptionListItemSchema = t.intersection([ @@ -40,7 +40,7 @@ export const updateExceptionListItemSchema = t.intersection([ t.exact( t.partial({ _tags, // defaults to empty array if not set during decode - comments: DefaultCommentsPartialArray, // defaults to empty array if not set during decode + comments: DefaultUpdateCommentsArray, // defaults to empty array if not set during decode entries: DefaultEntryArray, // defaults to empty array if not set during decode id, // defaults to undefined if not set during decode item_id: t.union([t.string, t.undefined]), @@ -65,7 +65,7 @@ export type UpdateExceptionListItemSchemaDecoded = Identity< '_tags' | 'tags' | 'entries' | 'namespace_type' | 'comments' > & { _tags: _Tags; - comments: CommentsPartialArray; + comments: UpdateCommentsArray; tags: Tags; entries: EntriesArray; namespace_type: NamespaceType; diff --git a/x-pack/plugins/lists/common/schemas/types/comments.mock.ts b/x-pack/plugins/lists/common/schemas/types/comments.mock.ts index ee58fafe074c7b..9e56ac292f8b56 100644 --- a/x-pack/plugins/lists/common/schemas/types/comments.mock.ts +++ b/x-pack/plugins/lists/common/schemas/types/comments.mock.ts @@ -6,17 +6,12 @@ import { DATE_NOW, USER } from '../../constants.mock'; -import { CommentsArray } from './comments'; +import { Comments, CommentsArray } from './comments'; -export const getCommentsMock = (): CommentsArray => [ - { - comment: 'some comment', - created_at: DATE_NOW, - created_by: USER, - }, - { - comment: 'some other comment', - created_at: DATE_NOW, - created_by: 'lily', - }, -]; +export const getCommentsMock = (): Comments => ({ + comment: 'some old comment', + created_at: DATE_NOW, + created_by: USER, +}); + +export const getCommentsArrayMock = (): CommentsArray => [getCommentsMock(), getCommentsMock()]; diff --git a/x-pack/plugins/lists/common/schemas/types/comments.test.ts b/x-pack/plugins/lists/common/schemas/types/comments.test.ts new file mode 100644 index 00000000000000..29bfde03abcc8d --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/comments.test.ts @@ -0,0 +1,217 @@ +/* + * 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 { pipe } from 'fp-ts/lib/pipeable'; +import { left } from 'fp-ts/lib/Either'; + +import { DATE_NOW } from '../../constants.mock'; +import { foldLeftRight, getPaths } from '../../siem_common_deps'; + +import { getCommentsArrayMock, getCommentsMock } from './comments.mock'; +import { + Comments, + CommentsArray, + CommentsArrayOrUndefined, + comments, + commentsArray, + commentsArrayOrUndefined, +} from './comments'; + +describe('Comments', () => { + describe('comments', () => { + test('it should validate a comments', () => { + const payload = getCommentsMock(); + const decoded = comments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should validate with "updated_at" and "updated_by"', () => { + const payload = getCommentsMock(); + payload.updated_at = DATE_NOW; + payload.updated_by = 'someone'; + const decoded = comments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should not validate when undefined', () => { + const payload = undefined; + const decoded = comments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "undefined" supplied to "({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)"', + 'Invalid value "undefined" supplied to "({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should not validate when "comment" is not a string', () => { + const payload: Omit & { comment: string[] } = { + ...getCommentsMock(), + comment: ['some value'], + }; + const decoded = comments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "["some value"]" supplied to "comment"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should not validate when "created_at" is not a string', () => { + const payload: Omit & { created_at: number } = { + ...getCommentsMock(), + created_at: 1, + }; + const decoded = comments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "created_at"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should not validate when "created_by" is not a string', () => { + const payload: Omit & { created_by: number } = { + ...getCommentsMock(), + created_by: 1, + }; + const decoded = comments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "created_by"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should not validate when "updated_at" is not a string', () => { + const payload: Omit & { updated_at: number } = { + ...getCommentsMock(), + updated_at: 1, + }; + const decoded = comments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "updated_at"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should not validate when "updated_by" is not a string', () => { + const payload: Omit & { updated_by: number } = { + ...getCommentsMock(), + updated_by: 1, + }; + const decoded = comments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "updated_by"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should strip out extra keys', () => { + const payload: Comments & { + extraKey?: string; + } = getCommentsMock(); + payload.extraKey = 'some value'; + const decoded = comments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(getCommentsMock()); + }); + }); + + describe('commentsArray', () => { + test('it should validate an array of comments', () => { + const payload = getCommentsArrayMock(); + const decoded = commentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should validate when a comments includes "updated_at" and "updated_by"', () => { + const commentsPayload = getCommentsMock(); + commentsPayload.updated_at = DATE_NOW; + commentsPayload.updated_by = 'someone'; + const payload = [{ ...commentsPayload }, ...getCommentsArrayMock()]; + const decoded = commentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should not validate when undefined', () => { + const payload = undefined; + const decoded = commentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "undefined" supplied to "Array<({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)>"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should not validate when array includes non comments types', () => { + const payload = ([1] as unknown) as CommentsArray; + const decoded = commentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "Array<({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)>"', + 'Invalid value "1" supplied to "Array<({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)>"', + ]); + expect(message.schema).toEqual({}); + }); + }); + + describe('commentsArrayOrUndefined', () => { + test('it should validate an array of comments', () => { + const payload = getCommentsArrayMock(); + const decoded = commentsArrayOrUndefined.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should validate when undefined', () => { + const payload = undefined; + const decoded = commentsArrayOrUndefined.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should not validate when array includes non comments types', () => { + const payload = ([1] as unknown) as CommentsArrayOrUndefined; + const decoded = commentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "Array<({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)>"', + 'Invalid value "1" supplied to "Array<({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)>"', + ]); + expect(message.schema).toEqual({}); + }); + }); +}); diff --git a/x-pack/plugins/lists/common/schemas/types/comments.ts b/x-pack/plugins/lists/common/schemas/types/comments.ts index d61608c3508f49..0ee3b05c8102f1 100644 --- a/x-pack/plugins/lists/common/schemas/types/comments.ts +++ b/x-pack/plugins/lists/common/schemas/types/comments.ts @@ -5,36 +5,24 @@ */ import * as t from 'io-ts'; -export const comment = t.exact( - t.type({ - comment: t.string, - created_at: t.string, // TODO: Make this into an ISO Date string check, - created_by: t.string, - }) -); - -export const commentsArray = t.array(comment); -export type CommentsArray = t.TypeOf; -export type Comment = t.TypeOf; -export const commentsArrayOrUndefined = t.union([commentsArray, t.undefined]); -export type CommentsArrayOrUndefined = t.TypeOf; - -export const commentPartial = t.intersection([ +export const comments = t.intersection([ t.exact( t.type({ comment: t.string, + created_at: t.string, // TODO: Make this into an ISO Date string check, + created_by: t.string, }) ), t.exact( t.partial({ - created_at: t.string, // TODO: Make this into an ISO Date string check, - created_by: t.string, + updated_at: t.string, + updated_by: t.string, }) ), ]); -export const commentsPartialArray = t.array(commentPartial); -export type CommentsPartialArray = t.TypeOf; -export type CommentPartial = t.TypeOf; -export const commentsPartialArrayOrUndefined = t.union([commentsPartialArray, t.undefined]); -export type CommentsPartialArrayOrUndefined = t.TypeOf; +export const commentsArray = t.array(comments); +export type CommentsArray = t.TypeOf; +export type Comments = t.TypeOf; +export const commentsArrayOrUndefined = t.union([commentsArray, t.undefined]); +export type CommentsArrayOrUndefined = t.TypeOf; diff --git a/x-pack/plugins/lists/common/schemas/types/create_comments.mock.ts b/x-pack/plugins/lists/common/schemas/types/create_comments.mock.ts new file mode 100644 index 00000000000000..60a59432275ca2 --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/create_comments.mock.ts @@ -0,0 +1,12 @@ +/* + * 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 { CreateComments, CreateCommentsArray } from './create_comments'; + +export const getCreateCommentsMock = (): CreateComments => ({ + comment: 'some comments', +}); + +export const getCreateCommentsArrayMock = (): CreateCommentsArray => [getCreateCommentsMock()]; diff --git a/x-pack/plugins/lists/common/schemas/types/create_comments.test.ts b/x-pack/plugins/lists/common/schemas/types/create_comments.test.ts new file mode 100644 index 00000000000000..d2680750e05e4e --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/create_comments.test.ts @@ -0,0 +1,134 @@ +/* + * 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 { pipe } from 'fp-ts/lib/pipeable'; +import { left } from 'fp-ts/lib/Either'; + +import { foldLeftRight, getPaths } from '../../siem_common_deps'; + +import { getCreateCommentsArrayMock, getCreateCommentsMock } from './create_comments.mock'; +import { + CreateComments, + CreateCommentsArray, + CreateCommentsArrayOrUndefined, + createComments, + createCommentsArray, + createCommentsArrayOrUndefined, +} from './create_comments'; + +describe('CreateComments', () => { + describe('createComments', () => { + test('it should validate a comments', () => { + const payload = getCreateCommentsMock(); + const decoded = createComments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should not validate when undefined', () => { + const payload = undefined; + const decoded = createComments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "undefined" supplied to "{| comment: string |}"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should not validate when "comment" is not a string', () => { + const payload: Omit & { comment: string[] } = { + ...getCreateCommentsMock(), + comment: ['some value'], + }; + const decoded = createComments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "["some value"]" supplied to "comment"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should strip out extra keys', () => { + const payload: CreateComments & { + extraKey?: string; + } = getCreateCommentsMock(); + payload.extraKey = 'some value'; + const decoded = createComments.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(getCreateCommentsMock()); + }); + }); + + describe('createCommentsArray', () => { + test('it should validate an array of comments', () => { + const payload = getCreateCommentsArrayMock(); + const decoded = createCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should not validate when undefined', () => { + const payload = undefined; + const decoded = createCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "undefined" supplied to "Array<{| comment: string |}>"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should not validate when array includes non comments types', () => { + const payload = ([1] as unknown) as CreateCommentsArray; + const decoded = createCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "Array<{| comment: string |}>"', + ]); + expect(message.schema).toEqual({}); + }); + }); + + describe('createCommentsArrayOrUndefined', () => { + test('it should validate an array of comments', () => { + const payload = getCreateCommentsArrayMock(); + const decoded = createCommentsArrayOrUndefined.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should validate when undefined', () => { + const payload = undefined; + const decoded = createCommentsArrayOrUndefined.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should not validate when array includes non comments types', () => { + const payload = ([1] as unknown) as CreateCommentsArrayOrUndefined; + const decoded = createCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "Array<{| comment: string |}>"', + ]); + expect(message.schema).toEqual({}); + }); + }); +}); diff --git a/x-pack/plugins/lists/common/schemas/types/create_comments.ts b/x-pack/plugins/lists/common/schemas/types/create_comments.ts new file mode 100644 index 00000000000000..c34419298ef935 --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/create_comments.ts @@ -0,0 +1,18 @@ +/* + * 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 * as t from 'io-ts'; + +export const createComments = t.exact( + t.type({ + comment: t.string, + }) +); + +export const createCommentsArray = t.array(createComments); +export type CreateCommentsArray = t.TypeOf; +export type CreateComments = t.TypeOf; +export const createCommentsArrayOrUndefined = t.union([createCommentsArray, t.undefined]); +export type CreateCommentsArrayOrUndefined = t.TypeOf; diff --git a/x-pack/plugins/lists/common/schemas/types/default_comments_array.test.ts b/x-pack/plugins/lists/common/schemas/types/default_comments_array.test.ts new file mode 100644 index 00000000000000..3a4241aaec82d3 --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/default_comments_array.test.ts @@ -0,0 +1,68 @@ +/* + * 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 { pipe } from 'fp-ts/lib/pipeable'; +import { left } from 'fp-ts/lib/Either'; + +import { foldLeftRight, getPaths } from '../../siem_common_deps'; + +import { DefaultCommentsArray } from './default_comments_array'; +import { CommentsArray } from './comments'; +import { getCommentsArrayMock } from './comments.mock'; + +describe('default_comments_array', () => { + test('it should validate an empty array', () => { + const payload: CommentsArray = []; + const decoded = DefaultCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should validate an array of comments', () => { + const payload: CommentsArray = getCommentsArrayMock(); + const decoded = DefaultCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should NOT validate an array of numbers', () => { + const payload = [1]; + const decoded = DefaultCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + // TODO: Known weird error formatting that is on our list to address + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "Array<({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)>"', + 'Invalid value "1" supplied to "Array<({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)>"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should NOT validate an array of strings', () => { + const payload = ['some string']; + const decoded = DefaultCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "some string" supplied to "Array<({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)>"', + 'Invalid value "some string" supplied to "Array<({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>)>"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should return a default array entry', () => { + const payload = null; + const decoded = DefaultCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual([]); + }); +}); diff --git a/x-pack/plugins/lists/common/schemas/types/default_comments_array.ts b/x-pack/plugins/lists/common/schemas/types/default_comments_array.ts index e824d481b36188..e8be299246ab82 100644 --- a/x-pack/plugins/lists/common/schemas/types/default_comments_array.ts +++ b/x-pack/plugins/lists/common/schemas/types/default_comments_array.ts @@ -7,14 +7,9 @@ import * as t from 'io-ts'; import { Either } from 'fp-ts/lib/Either'; -import { CommentsArray, CommentsPartialArray, comment, commentPartial } from './comments'; +import { CommentsArray, comments } from './comments'; export type DefaultCommentsArrayC = t.Type; -export type DefaultCommentsPartialArrayC = t.Type< - CommentsPartialArray, - CommentsPartialArray, - unknown ->; /** * Types the DefaultCommentsArray as: @@ -26,24 +21,8 @@ export const DefaultCommentsArray: DefaultCommentsArrayC = new t.Type< unknown >( 'DefaultCommentsArray', - t.array(comment).is, - (input, context): Either => - input == null ? t.success([]) : t.array(comment).validate(input, context), - t.identity -); - -/** - * Types the DefaultCommentsPartialArray as: - * - If null or undefined, then a default array of type entry will be set - */ -export const DefaultCommentsPartialArray: DefaultCommentsPartialArrayC = new t.Type< - CommentsPartialArray, - CommentsPartialArray, - unknown ->( - 'DefaultCommentsPartialArray', - t.array(commentPartial).is, - (input, context): Either => - input == null ? t.success([]) : t.array(commentPartial).validate(input, context), + t.array(comments).is, + (input): Either => + input == null ? t.success([]) : t.array(comments).decode(input), t.identity ); diff --git a/x-pack/plugins/lists/common/schemas/types/default_create_comments_array.test.ts b/x-pack/plugins/lists/common/schemas/types/default_create_comments_array.test.ts new file mode 100644 index 00000000000000..f5ef7d0ad96bd0 --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/default_create_comments_array.test.ts @@ -0,0 +1,66 @@ +/* + * 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 { pipe } from 'fp-ts/lib/pipeable'; +import { left } from 'fp-ts/lib/Either'; + +import { foldLeftRight, getPaths } from '../../siem_common_deps'; + +import { DefaultCreateCommentsArray } from './default_create_comments_array'; +import { CreateCommentsArray } from './create_comments'; +import { getCreateCommentsArrayMock } from './create_comments.mock'; + +describe('default_create_comments_array', () => { + test('it should validate an empty array', () => { + const payload: CreateCommentsArray = []; + const decoded = DefaultCreateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should validate an array of comments', () => { + const payload: CreateCommentsArray = getCreateCommentsArrayMock(); + const decoded = DefaultCreateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should NOT validate an array of numbers', () => { + const payload = [1]; + const decoded = DefaultCreateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + // TODO: Known weird error formatting that is on our list to address + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "Array<{| comment: string |}>"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should NOT validate an array of strings', () => { + const payload = ['some string']; + const decoded = DefaultCreateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "some string" supplied to "Array<{| comment: string |}>"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should return a default array entry', () => { + const payload = null; + const decoded = DefaultCreateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual([]); + }); +}); diff --git a/x-pack/plugins/lists/common/schemas/types/default_create_comments_array.ts b/x-pack/plugins/lists/common/schemas/types/default_create_comments_array.ts new file mode 100644 index 00000000000000..51431b9c39850b --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/default_create_comments_array.ts @@ -0,0 +1,28 @@ +/* + * 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 * as t from 'io-ts'; +import { Either } from 'fp-ts/lib/Either'; + +import { CreateCommentsArray, createComments } from './create_comments'; + +export type DefaultCreateCommentsArrayC = t.Type; + +/** + * Types the DefaultCreateComments as: + * - If null or undefined, then a default array of type entry will be set + */ +export const DefaultCreateCommentsArray: DefaultCreateCommentsArrayC = new t.Type< + CreateCommentsArray, + CreateCommentsArray, + unknown +>( + 'DefaultCreateComments', + t.array(createComments).is, + (input): Either => + input == null ? t.success([]) : t.array(createComments).decode(input), + t.identity +); diff --git a/x-pack/plugins/lists/common/schemas/types/default_update_comments_array.test.ts b/x-pack/plugins/lists/common/schemas/types/default_update_comments_array.test.ts new file mode 100644 index 00000000000000..b023e73cb9328b --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/default_update_comments_array.test.ts @@ -0,0 +1,70 @@ +/* + * 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 { pipe } from 'fp-ts/lib/pipeable'; +import { left } from 'fp-ts/lib/Either'; + +import { foldLeftRight, getPaths } from '../../siem_common_deps'; + +import { DefaultUpdateCommentsArray } from './default_update_comments_array'; +import { UpdateCommentsArray } from './update_comments'; +import { getUpdateCommentsArrayMock } from './update_comments.mock'; + +describe('default_update_comments_array', () => { + test('it should validate an empty array', () => { + const payload: UpdateCommentsArray = []; + const decoded = DefaultUpdateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should validate an array of comments', () => { + const payload: UpdateCommentsArray = getUpdateCommentsArrayMock(); + const decoded = DefaultUpdateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should NOT validate an array of numbers', () => { + const payload = [1]; + const decoded = DefaultUpdateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + // TODO: Known weird error formatting that is on our list to address + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + 'Invalid value "1" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + 'Invalid value "1" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should NOT validate an array of strings', () => { + const payload = ['some string']; + const decoded = DefaultUpdateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "some string" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + 'Invalid value "some string" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + 'Invalid value "some string" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should return a default array entry', () => { + const payload = null; + const decoded = DefaultUpdateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual([]); + }); +}); diff --git a/x-pack/plugins/lists/common/schemas/types/default_update_comments_array.ts b/x-pack/plugins/lists/common/schemas/types/default_update_comments_array.ts new file mode 100644 index 00000000000000..c2593826a6358e --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/default_update_comments_array.ts @@ -0,0 +1,28 @@ +/* + * 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 * as t from 'io-ts'; +import { Either } from 'fp-ts/lib/Either'; + +import { UpdateCommentsArray, updateCommentsArray } from './update_comments'; + +export type DefaultUpdateCommentsArrayC = t.Type; + +/** + * Types the DefaultCommentsUpdate as: + * - If null or undefined, then a default array of type entry will be set + */ +export const DefaultUpdateCommentsArray: DefaultUpdateCommentsArrayC = new t.Type< + UpdateCommentsArray, + UpdateCommentsArray, + unknown +>( + 'DefaultCreateComments', + updateCommentsArray.is, + (input): Either => + input == null ? t.success([]) : updateCommentsArray.decode(input), + t.identity +); diff --git a/x-pack/plugins/lists/common/schemas/types/index.ts b/x-pack/plugins/lists/common/schemas/types/index.ts index 97f2b0f59a5fdb..16433e00f2b163 100644 --- a/x-pack/plugins/lists/common/schemas/types/index.ts +++ b/x-pack/plugins/lists/common/schemas/types/index.ts @@ -3,8 +3,12 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ +export * from './comments'; +export * from './create_comments'; +export * from './update_comments'; export * from './default_comments_array'; -export * from './default_entries_array'; +export * from './default_create_comments_array'; +export * from './default_update_comments_array'; export * from './default_namespace'; -export * from './comments'; +export * from './default_entries_array'; export * from './entries'; diff --git a/x-pack/plugins/lists/common/schemas/types/update_comments.mock.ts b/x-pack/plugins/lists/common/schemas/types/update_comments.mock.ts new file mode 100644 index 00000000000000..3e963c2607dc53 --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/update_comments.mock.ts @@ -0,0 +1,14 @@ +/* + * 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 { getCommentsMock } from './comments.mock'; +import { getCreateCommentsMock } from './create_comments.mock'; +import { UpdateCommentsArray } from './update_comments'; + +export const getUpdateCommentsArrayMock = (): UpdateCommentsArray => [ + getCommentsMock(), + getCreateCommentsMock(), +]; diff --git a/x-pack/plugins/lists/common/schemas/types/update_comments.test.ts b/x-pack/plugins/lists/common/schemas/types/update_comments.test.ts new file mode 100644 index 00000000000000..7668504b031b5a --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/update_comments.test.ts @@ -0,0 +1,108 @@ +/* + * 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 { pipe } from 'fp-ts/lib/pipeable'; +import { left } from 'fp-ts/lib/Either'; + +import { foldLeftRight, getPaths } from '../../siem_common_deps'; + +import { getUpdateCommentsArrayMock } from './update_comments.mock'; +import { + UpdateCommentsArray, + UpdateCommentsArrayOrUndefined, + updateCommentsArray, + updateCommentsArrayOrUndefined, +} from './update_comments'; +import { getCommentsMock } from './comments.mock'; +import { getCreateCommentsMock } from './create_comments.mock'; + +describe('CommentsUpdate', () => { + describe('updateCommentsArray', () => { + test('it should validate an array of comments', () => { + const payload = getUpdateCommentsArrayMock(); + const decoded = updateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should validate an array of existing comments', () => { + const payload = [getCommentsMock()]; + const decoded = updateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should validate an array of new comments', () => { + const payload = [getCreateCommentsMock()]; + const decoded = updateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should not validate when undefined', () => { + const payload = undefined; + const decoded = updateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "undefined" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + ]); + expect(message.schema).toEqual({}); + }); + + test('it should not validate when array includes non comments types', () => { + const payload = ([1] as unknown) as UpdateCommentsArray; + const decoded = updateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + 'Invalid value "1" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + 'Invalid value "1" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + ]); + expect(message.schema).toEqual({}); + }); + }); + + describe('updateCommentsArrayOrUndefined', () => { + test('it should validate an array of comments', () => { + const payload = getUpdateCommentsArrayMock(); + const decoded = updateCommentsArrayOrUndefined.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should validate when undefined', () => { + const payload = undefined; + const decoded = updateCommentsArrayOrUndefined.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([]); + expect(message.schema).toEqual(payload); + }); + + test('it should not validate when array includes non comments types', () => { + const payload = ([1] as unknown) as UpdateCommentsArrayOrUndefined; + const decoded = updateCommentsArray.decode(payload); + const message = pipe(decoded, foldLeftRight); + + expect(getPaths(left(message.errors))).toEqual([ + 'Invalid value "1" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + 'Invalid value "1" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + 'Invalid value "1" supplied to "Array<(({| comment: string, created_at: string, created_by: string |} & Partial<{| updated_at: string, updated_by: string |}>) | {| comment: string |})>"', + ]); + expect(message.schema).toEqual({}); + }); + }); +}); diff --git a/x-pack/plugins/lists/common/schemas/types/update_comments.ts b/x-pack/plugins/lists/common/schemas/types/update_comments.ts new file mode 100644 index 00000000000000..4a21bfa363d450 --- /dev/null +++ b/x-pack/plugins/lists/common/schemas/types/update_comments.ts @@ -0,0 +1,14 @@ +/* + * 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 * as t from 'io-ts'; + +import { comments } from './comments'; +import { createComments } from './create_comments'; + +export const updateCommentsArray = t.array(t.union([comments, createComments])); +export type UpdateCommentsArray = t.TypeOf; +export const updateCommentsArrayOrUndefined = t.union([updateCommentsArray, t.undefined]); +export type UpdateCommentsArrayOrUndefined = t.TypeOf; diff --git a/x-pack/plugins/lists/public/exceptions/api.test.ts b/x-pack/plugins/lists/public/exceptions/api.test.ts index 72a689650ea2d3..975641b9bebe26 100644 --- a/x-pack/plugins/lists/public/exceptions/api.test.ts +++ b/x-pack/plugins/lists/public/exceptions/api.test.ts @@ -250,7 +250,7 @@ describe('Exceptions Lists API', () => { }); // TODO Would like to just use getExceptionListSchemaMock() here, but // validation returns object in different order, making the strings not match - expect(fetchMock).toHaveBeenCalledWith('/api/exception_lists', { + expect(fetchMock).toHaveBeenCalledWith('/api/exception_lists/items', { body: JSON.stringify(payload), method: 'PUT', signal: abortCtrl.signal, diff --git a/x-pack/plugins/lists/public/exceptions/api.ts b/x-pack/plugins/lists/public/exceptions/api.ts index 2ab7695d8c17c0..a581cfd08ecc19 100644 --- a/x-pack/plugins/lists/public/exceptions/api.ts +++ b/x-pack/plugins/lists/public/exceptions/api.ts @@ -176,7 +176,7 @@ export const updateExceptionListItem = async ({ if (validatedRequest != null) { try { - const response = await http.fetch(EXCEPTION_LIST_URL, { + const response = await http.fetch(EXCEPTION_LIST_ITEM_URL, { body: JSON.stringify(listItem), method: 'PUT', signal, diff --git a/x-pack/plugins/lists/server/saved_objects/exception_list.ts b/x-pack/plugins/lists/server/saved_objects/exception_list.ts index 57bc63e6f7e358..fc04c5e278d64a 100644 --- a/x-pack/plugins/lists/server/saved_objects/exception_list.ts +++ b/x-pack/plugins/lists/server/saved_objects/exception_list.ts @@ -77,6 +77,12 @@ export const exceptionListItemMapping: SavedObjectsType['mappings'] = { created_by: { type: 'keyword', }, + updated_at: { + type: 'keyword', + }, + updated_by: { + type: 'keyword', + }, }, }, entries: { diff --git a/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_item.json b/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_item.json index 33c9303c7b5231..08bd95b7d124c8 100644 --- a/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_item.json +++ b/x-pack/plugins/lists/server/scripts/exception_lists/updates/simple_update_item.json @@ -5,14 +5,7 @@ "type": "simple", "description": "This is a sample change here this list", "name": "Sample Endpoint Exception List update change", - "comments": [ - { - "comment": "this was an old comment.", - "created_by": "lily", - "created_at": "2020-04-20T15:25:31.830Z" - }, - { "comment": "this is a newly added comment" } - ], + "comments": [{ "comment": "this is a newly added comment" }], "entries": [ { "field": "event.category", diff --git a/x-pack/plugins/lists/server/services/exception_lists/create_exception_list_item.ts b/x-pack/plugins/lists/server/services/exception_lists/create_exception_list_item.ts index 22a9fbcfb53aff..a84283aeabbba5 100644 --- a/x-pack/plugins/lists/server/services/exception_lists/create_exception_list_item.ts +++ b/x-pack/plugins/lists/server/services/exception_lists/create_exception_list_item.ts @@ -8,7 +8,7 @@ import { SavedObjectsClientContract } from 'kibana/server'; import uuid from 'uuid'; import { - CommentsPartialArray, + CreateCommentsArray, Description, EntriesArray, ExceptionListItemSchema, @@ -25,13 +25,13 @@ import { import { getSavedObjectType, - transformComments, + transformCreateCommentsToComments, transformSavedObjectToExceptionListItem, } from './utils'; interface CreateExceptionListItemOptions { _tags: _Tags; - comments: CommentsPartialArray; + comments: CreateCommentsArray; listId: ListId; itemId: ItemId; savedObjectsClient: SavedObjectsClientContract; @@ -64,9 +64,10 @@ export const createExceptionListItem = async ({ }: CreateExceptionListItemOptions): Promise => { const savedObjectType = getSavedObjectType({ namespaceType }); const dateNow = new Date().toISOString(); + const transformedComments = transformCreateCommentsToComments({ comments, user }); const savedObject = await savedObjectsClient.create(savedObjectType, { _tags, - comments: transformComments({ comments, user }), + comments: transformedComments, created_at: dateNow, created_by: user, description, diff --git a/x-pack/plugins/lists/server/services/exception_lists/exception_list_client_types.ts b/x-pack/plugins/lists/server/services/exception_lists/exception_list_client_types.ts index 03f5de516561b5..203d32911a6df0 100644 --- a/x-pack/plugins/lists/server/services/exception_lists/exception_list_client_types.ts +++ b/x-pack/plugins/lists/server/services/exception_lists/exception_list_client_types.ts @@ -7,7 +7,7 @@ import { SavedObjectsClientContract } from 'kibana/server'; import { - CommentsPartialArray, + CreateCommentsArray, Description, DescriptionOrUndefined, EntriesArray, @@ -30,6 +30,7 @@ import { SortOrderOrUndefined, Tags, TagsOrUndefined, + UpdateCommentsArray, _Tags, _TagsOrUndefined, } from '../../../common/schemas'; @@ -88,7 +89,7 @@ export interface GetExceptionListItemOptions { export interface CreateExceptionListItemOptions { _tags: _Tags; - comments: CommentsPartialArray; + comments: CreateCommentsArray; entries: EntriesArray; itemId: ItemId; listId: ListId; @@ -102,7 +103,7 @@ export interface CreateExceptionListItemOptions { export interface UpdateExceptionListItemOptions { _tags: _TagsOrUndefined; - comments: CommentsPartialArray; + comments: UpdateCommentsArray; entries: EntriesArrayOrUndefined; id: IdOrUndefined; itemId: ItemIdOrUndefined; diff --git a/x-pack/plugins/lists/server/services/exception_lists/update_exception_list_item.ts b/x-pack/plugins/lists/server/services/exception_lists/update_exception_list_item.ts index 7ca9bfd83ab646..5578063fd9b6ca 100644 --- a/x-pack/plugins/lists/server/services/exception_lists/update_exception_list_item.ts +++ b/x-pack/plugins/lists/server/services/exception_lists/update_exception_list_item.ts @@ -7,7 +7,6 @@ import { SavedObjectsClientContract } from 'kibana/server'; import { - CommentsPartialArray, DescriptionOrUndefined, EntriesArrayOrUndefined, ExceptionListItemSchema, @@ -19,19 +18,20 @@ import { NameOrUndefined, NamespaceType, TagsOrUndefined, + UpdateCommentsArrayOrUndefined, _TagsOrUndefined, } from '../../../common/schemas'; import { getSavedObjectType, - transformComments, transformSavedObjectUpdateToExceptionListItem, + transformUpdateCommentsToComments, } from './utils'; import { getExceptionListItem } from './get_exception_list_item'; interface UpdateExceptionListItemOptions { id: IdOrUndefined; - comments: CommentsPartialArray; + comments: UpdateCommentsArrayOrUndefined; _tags: _TagsOrUndefined; name: NameOrUndefined; description: DescriptionOrUndefined; @@ -71,12 +71,17 @@ export const updateExceptionListItem = async ({ if (exceptionListItem == null) { return null; } else { + const transformedComments = transformUpdateCommentsToComments({ + comments, + existingComments: exceptionListItem.comments, + user, + }); const savedObject = await savedObjectsClient.update( savedObjectType, exceptionListItem.id, { _tags, - comments: transformComments({ comments, user }), + comments: transformedComments, description, entries, meta, diff --git a/x-pack/plugins/lists/server/services/exception_lists/utils.test.ts b/x-pack/plugins/lists/server/services/exception_lists/utils.test.ts new file mode 100644 index 00000000000000..9cc2aacd884584 --- /dev/null +++ b/x-pack/plugins/lists/server/services/exception_lists/utils.test.ts @@ -0,0 +1,437 @@ +/* + * 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 sinon from 'sinon'; +import moment from 'moment'; + +import { DATE_NOW, USER } from '../../../common/constants.mock'; + +import { + isCommentEqual, + transformCreateCommentsToComments, + transformUpdateComments, + transformUpdateCommentsToComments, +} from './utils'; + +describe('utils', () => { + const anchor = '2020-06-17T20:34:51.337Z'; + const unix = moment(anchor).valueOf(); + let clock: sinon.SinonFakeTimers; + + beforeEach(() => { + clock = sinon.useFakeTimers(unix); + }); + + afterEach(() => { + clock.restore(); + }); + + describe('#transformUpdateCommentsToComments', () => { + test('it returns empty array if "comments" is undefined and no comments exist', () => { + const comments = transformUpdateCommentsToComments({ + comments: undefined, + existingComments: [], + user: 'lily', + }); + + expect(comments).toEqual([]); + }); + + test('it formats newly added comments', () => { + const comments = transformUpdateCommentsToComments({ + comments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + { comment: 'Im a new comment' }, + ], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + user: 'lily', + }); + + expect(comments).toEqual([ + { + comment: 'Im an old comment', + created_at: anchor, + created_by: 'lily', + }, + { + comment: 'Im a new comment', + created_at: anchor, + created_by: 'lily', + }, + ]); + }); + + test('it formats multiple newly added comments', () => { + const comments = transformUpdateCommentsToComments({ + comments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + { comment: 'Im a new comment' }, + { comment: 'Im another new comment' }, + ], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + user: 'lily', + }); + + expect(comments).toEqual([ + { + comment: 'Im an old comment', + created_at: anchor, + created_by: 'lily', + }, + { + comment: 'Im a new comment', + created_at: anchor, + created_by: 'lily', + }, + { + comment: 'Im another new comment', + created_at: anchor, + created_by: 'lily', + }, + ]); + }); + + test('it should not throw if comments match existing comments', () => { + const comments = transformUpdateCommentsToComments({ + comments: [{ comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + user: 'lily', + }); + + expect(comments).toEqual([ + { + comment: 'Im an old comment', + created_at: anchor, + created_by: 'lily', + }, + ]); + }); + + test('it does not throw if user tries to update one of their own existing comments', () => { + const comments = transformUpdateCommentsToComments({ + comments: [ + { + comment: 'Im an old comment that is trying to be updated', + created_at: DATE_NOW, + created_by: 'lily', + }, + ], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + user: 'lily', + }); + + expect(comments).toEqual([ + { + comment: 'Im an old comment that is trying to be updated', + created_at: DATE_NOW, + created_by: 'lily', + updated_at: anchor, + updated_by: 'lily', + }, + ]); + }); + + test('it throws an error if user tries to update their comment, without passing in the "created_at" and "created_by" properties', () => { + expect(() => + transformUpdateCommentsToComments({ + comments: [ + { + comment: 'Im an old comment that is trying to be updated', + }, + ], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + user: 'lily', + }) + ).toThrowErrorMatchingInlineSnapshot( + `"When trying to update a comment, \\"created_at\\" and \\"created_by\\" must be present"` + ); + }); + + test('it throws an error if user tries to delete comments', () => { + expect(() => + transformUpdateCommentsToComments({ + comments: [], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + user: 'lily', + }) + ).toThrowErrorMatchingInlineSnapshot( + `"Comments cannot be deleted, only new comments may be added"` + ); + }); + + test('it throws if user tries to update existing comment timestamp', () => { + expect(() => + transformUpdateCommentsToComments({ + comments: [{ comment: 'Im an old comment', created_at: anchor, created_by: 'lily' }], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + user: 'bane', + }) + ).toThrowErrorMatchingInlineSnapshot(`"Not authorized to edit others comments"`); + }); + + test('it throws if user tries to update existing comment author', () => { + expect(() => + transformUpdateCommentsToComments({ + comments: [{ comment: 'Im an old comment', created_at: anchor, created_by: 'lily' }], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'me!' }, + ], + user: 'bane', + }) + ).toThrowErrorMatchingInlineSnapshot(`"Not authorized to edit others comments"`); + }); + + test('it throws if user tries to update an existing comment that is not their own', () => { + expect(() => + transformUpdateCommentsToComments({ + comments: [ + { + comment: 'Im an old comment that is trying to be updated', + created_at: DATE_NOW, + created_by: 'lily', + }, + ], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + user: 'bane', + }) + ).toThrowErrorMatchingInlineSnapshot(`"Not authorized to edit others comments"`); + }); + + test('it throws if user tries to update order of comments', () => { + expect(() => + transformUpdateCommentsToComments({ + comments: [ + { comment: 'Im a new comment' }, + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + user: 'lily', + }) + ).toThrowErrorMatchingInlineSnapshot( + `"When trying to update a comment, \\"created_at\\" and \\"created_by\\" must be present"` + ); + }); + + test('it throws an error if user tries to add comment formatted as existing comment when none yet exist', () => { + expect(() => + transformUpdateCommentsToComments({ + comments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + { comment: 'Im a new comment' }, + ], + existingComments: [], + user: 'lily', + }) + ).toThrowErrorMatchingInlineSnapshot(`"Only new comments may be added"`); + }); + + test('it throws if empty comment exists', () => { + expect(() => + transformUpdateCommentsToComments({ + comments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + { comment: ' ' }, + ], + existingComments: [ + { comment: 'Im an old comment', created_at: DATE_NOW, created_by: 'lily' }, + ], + user: 'lily', + }) + ).toThrowErrorMatchingInlineSnapshot(`"Empty comments not allowed"`); + }); + }); + + describe('#transformCreateCommentsToComments', () => { + test('it returns "undefined" if "comments" is "undefined"', () => { + const comments = transformCreateCommentsToComments({ + comments: undefined, + user: 'lily', + }); + + expect(comments).toBeUndefined(); + }); + + test('it formats newly added comments', () => { + const comments = transformCreateCommentsToComments({ + comments: [{ comment: 'Im a new comment' }, { comment: 'Im another new comment' }], + user: 'lily', + }); + + expect(comments).toEqual([ + { + comment: 'Im a new comment', + created_at: anchor, + created_by: 'lily', + }, + { + comment: 'Im another new comment', + created_at: anchor, + created_by: 'lily', + }, + ]); + }); + + test('it throws an error if user tries to add an empty comment', () => { + expect(() => + transformCreateCommentsToComments({ + comments: [{ comment: ' ' }], + user: 'lily', + }) + ).toThrowErrorMatchingInlineSnapshot(`"Empty comments not allowed"`); + }); + }); + + describe('#transformUpdateComments', () => { + test('it updates comment and adds "updated_at" and "updated_by"', () => { + const comments = transformUpdateComments({ + comment: { + comment: 'Im an old comment that is trying to be updated', + created_at: DATE_NOW, + created_by: 'lily', + }, + existingComment: { + comment: 'Im an old comment', + created_at: DATE_NOW, + created_by: 'lily', + }, + user: 'lily', + }); + + expect(comments).toEqual({ + comment: 'Im an old comment that is trying to be updated', + created_at: '2020-04-20T15:25:31.830Z', + created_by: 'lily', + updated_at: anchor, + updated_by: 'lily', + }); + }); + + test('it throws if user tries to update an existing comment that is not their own', () => { + expect(() => + transformUpdateComments({ + comment: { + comment: 'Im an old comment that is trying to be updated', + created_at: DATE_NOW, + created_by: 'lily', + }, + existingComment: { + comment: 'Im an old comment', + created_at: DATE_NOW, + created_by: 'lily', + }, + user: 'bane', + }) + ).toThrowErrorMatchingInlineSnapshot(`"Not authorized to edit others comments"`); + }); + + test('it throws if user tries to update an existing comments timestamp', () => { + expect(() => + transformUpdateComments({ + comment: { + comment: 'Im an old comment that is trying to be updated', + created_at: anchor, + created_by: 'lily', + }, + existingComment: { + comment: 'Im an old comment', + created_at: DATE_NOW, + created_by: 'lily', + }, + user: 'lily', + }) + ).toThrowErrorMatchingInlineSnapshot(`"Unable to update comment"`); + }); + }); + + describe('#isCommentEqual', () => { + test('it returns false if "comment" values differ', () => { + const result = isCommentEqual( + { + comment: 'some old comment', + created_at: DATE_NOW, + created_by: USER, + }, + { + comment: 'some older comment', + created_at: DATE_NOW, + created_by: USER, + } + ); + + expect(result).toBeFalsy(); + }); + + test('it returns false if "created_at" values differ', () => { + const result = isCommentEqual( + { + comment: 'some old comment', + created_at: DATE_NOW, + created_by: USER, + }, + { + comment: 'some old comment', + created_at: anchor, + created_by: USER, + } + ); + + expect(result).toBeFalsy(); + }); + + test('it returns false if "created_by" values differ', () => { + const result = isCommentEqual( + { + comment: 'some old comment', + created_at: DATE_NOW, + created_by: USER, + }, + { + comment: 'some old comment', + created_at: DATE_NOW, + created_by: 'lily', + } + ); + + expect(result).toBeFalsy(); + }); + + test('it returns true if comment values are equivalent', () => { + const result = isCommentEqual( + { + comment: 'some old comment', + created_at: DATE_NOW, + created_by: USER, + }, + { + created_at: DATE_NOW, + created_by: USER, + // Disabling to assure that order doesn't matter + // eslint-disable-next-line sort-keys + comment: 'some old comment', + } + ); + + expect(result).toBeTruthy(); + }); + }); +}); diff --git a/x-pack/plugins/lists/server/services/exception_lists/utils.ts b/x-pack/plugins/lists/server/services/exception_lists/utils.ts index 5690a42bed87ed..14b5309f67dc92 100644 --- a/x-pack/plugins/lists/server/services/exception_lists/utils.ts +++ b/x-pack/plugins/lists/server/services/exception_lists/utils.ts @@ -6,15 +6,21 @@ import { SavedObject, SavedObjectsFindResponse, SavedObjectsUpdateResponse } from 'kibana/server'; +import { ErrorWithStatusCode } from '../../error_with_status_code'; import { + Comments, + CommentsArray, CommentsArrayOrUndefined, - CommentsPartialArrayOrUndefined, + CreateComments, + CreateCommentsArrayOrUndefined, ExceptionListItemSchema, ExceptionListSchema, ExceptionListSoSchema, FoundExceptionListItemSchema, FoundExceptionListSchema, NamespaceType, + UpdateCommentsArrayOrUndefined, + comments as commentsSchema, } from '../../../common/schemas'; import { SavedObjectType, @@ -251,21 +257,103 @@ export const transformSavedObjectsToFoundExceptionList = ({ }; }; -export const transformComments = ({ +/* + * Determines whether two comments are equal, this is a very + * naive implementation, not meant to be used for deep equality of complex objects + */ +export const isCommentEqual = (commentA: Comments, commentB: Comments): boolean => { + const a = Object.values(commentA).sort().join(); + const b = Object.values(commentB).sort().join(); + + return a === b; +}; + +export const transformUpdateCommentsToComments = ({ + comments, + existingComments, + user, +}: { + comments: UpdateCommentsArrayOrUndefined; + existingComments: CommentsArray; + user: string; +}): CommentsArray => { + const newComments = comments ?? []; + + if (newComments.length < existingComments.length) { + throw new ErrorWithStatusCode( + 'Comments cannot be deleted, only new comments may be added', + 403 + ); + } else { + return newComments.flatMap((c, index) => { + const existingComment = existingComments[index]; + + if (commentsSchema.is(existingComment) && !commentsSchema.is(c)) { + throw new ErrorWithStatusCode( + 'When trying to update a comment, "created_at" and "created_by" must be present', + 403 + ); + } else if (commentsSchema.is(c) && existingComment == null) { + throw new ErrorWithStatusCode('Only new comments may be added', 403); + } else if ( + commentsSchema.is(c) && + existingComment != null && + !isCommentEqual(c, existingComment) + ) { + return transformUpdateComments({ comment: c, existingComment, user }); + } else { + return transformCreateCommentsToComments({ comments: [c], user }) ?? []; + } + }); + } +}; + +export const transformUpdateComments = ({ + comment, + existingComment, + user, +}: { + comment: Comments; + existingComment: Comments; + user: string; +}): Comments => { + if (comment.created_by !== user) { + // existing comment is being edited, can only be edited by author + throw new ErrorWithStatusCode('Not authorized to edit others comments', 401); + } else if (existingComment.created_at !== comment.created_at) { + throw new ErrorWithStatusCode('Unable to update comment', 403); + } else if (comment.comment.trim().length === 0) { + throw new ErrorWithStatusCode('Empty comments not allowed', 403); + } else { + const dateNow = new Date().toISOString(); + + return { + ...comment, + updated_at: dateNow, + updated_by: user, + }; + } +}; + +export const transformCreateCommentsToComments = ({ comments, user, }: { - comments: CommentsPartialArrayOrUndefined; + comments: CreateCommentsArrayOrUndefined; user: string; }): CommentsArrayOrUndefined => { const dateNow = new Date().toISOString(); if (comments != null) { - return comments.map((comment) => { - return { - comment: comment.comment, - created_at: comment.created_at ?? dateNow, - created_by: comment.created_by ?? user, - }; + return comments.map((c: CreateComments) => { + if (c.comment.trim().length === 0) { + throw new ErrorWithStatusCode('Empty comments not allowed', 403); + } else { + return { + comment: c.comment, + created_at: dateNow, + created_by: user, + }; + } }); } else { return comments; diff --git a/x-pack/plugins/maps/public/actions/ui_actions.ts b/x-pack/plugins/maps/public/actions/ui_actions.ts index eaf6cf42eb7351..8f2650beb012d7 100644 --- a/x-pack/plugins/maps/public/actions/ui_actions.ts +++ b/x-pack/plugins/maps/public/actions/ui_actions.ts @@ -7,7 +7,7 @@ import { Dispatch } from 'redux'; import { MapStoreState } from '../reducers/store'; import { getFlyoutDisplay } from '../selectors/ui_selectors'; -import { FLYOUT_STATE, INDEXING_STAGE } from '../reducers/ui'; +import { FLYOUT_STATE } from '../reducers/ui'; import { trackMapSettings } from './map_actions'; import { setSelectedLayer } from './layer_actions'; @@ -20,7 +20,6 @@ export const SET_READ_ONLY = 'SET_READ_ONLY'; export const SET_OPEN_TOC_DETAILS = 'SET_OPEN_TOC_DETAILS'; export const SHOW_TOC_DETAILS = 'SHOW_TOC_DETAILS'; export const HIDE_TOC_DETAILS = 'HIDE_TOC_DETAILS'; -export const UPDATE_INDEXING_STAGE = 'UPDATE_INDEXING_STAGE'; export function exitFullScreen() { return { @@ -95,10 +94,3 @@ export function hideTOCDetails(layerId: string) { layerId, }; } - -export function updateIndexingStage(stage: INDEXING_STAGE | null) { - return { - type: UPDATE_INDEXING_STAGE, - stage, - }; -} diff --git a/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts b/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts index a255ffb00e312b..0eb1d2c3b222ce 100644 --- a/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts +++ b/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts @@ -10,14 +10,18 @@ import { LayerDescriptor } from '../../../common/descriptor_types'; import { LAYER_WIZARD_CATEGORY } from '../../../common/constants'; export type RenderWizardArguments = { - previewLayers: (layerDescriptors: LayerDescriptor[], isIndexingSource?: boolean) => void; + previewLayers: (layerDescriptors: LayerDescriptor[]) => void; mapColors: string[]; - // upload arguments - isIndexingTriggered: boolean; - onRemove: () => void; - onIndexReady: (indexReady: boolean) => void; - importSuccessHandler: (indexResponses: unknown) => void; - importErrorHandler: (indexResponses: unknown) => void; + // multi-step arguments for wizards that supply 'prerequisiteSteps' + currentStepId: string | null; + enableNextBtn: () => void; + disableNextBtn: () => void; + startStepLoading: () => void; + stopStepLoading: () => void; + // Typically, next step will be triggered via user clicking next button. + // However, this method is made available to trigger next step manually + // for async task completion that triggers the next step. + advanceToNextStep: () => void; }; export type LayerWizard = { @@ -25,7 +29,7 @@ export type LayerWizard = { checkVisibility?: () => Promise; description: string; icon: string; - isIndexingSource?: boolean; + prerequisiteSteps?: Array<{ id: string; label: string }>; renderWizard(renderWizardArguments: RenderWizardArguments): ReactElement; title: string; }; diff --git a/x-pack/plugins/maps/public/classes/sources/client_file_source/create_client_file_source_editor.js b/x-pack/plugins/maps/public/classes/sources/client_file_source/create_client_file_source_editor.js deleted file mode 100644 index f9bfc4ddde91be..00000000000000 --- a/x-pack/plugins/maps/public/classes/sources/client_file_source/create_client_file_source_editor.js +++ /dev/null @@ -1,29 +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 { getFileUploadComponent } from '../../../kibana_services'; - -export function ClientFileCreateSourceEditor({ - previewGeojsonFile, - isIndexingTriggered = false, - onIndexingComplete, - onRemove, - onIndexReady, -}) { - const FileUpload = getFileUploadComponent(); - return ( - - ); -} diff --git a/x-pack/plugins/maps/public/classes/sources/client_file_source/create_client_file_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/client_file_source/create_client_file_source_editor.tsx new file mode 100644 index 00000000000000..344bdc92489e03 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/client_file_source/create_client_file_source_editor.tsx @@ -0,0 +1,160 @@ +/* + * 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, { Component } from 'react'; +import { IFieldType } from 'src/plugins/data/public'; +import { + ES_GEO_FIELD_TYPE, + DEFAULT_MAX_RESULT_WINDOW, + SCALING_TYPES, +} from '../../../../common/constants'; +import { getFileUploadComponent } from '../../../kibana_services'; +// @ts-ignore +import { GeojsonFileSource } from './geojson_file_source'; +import { VectorLayer } from '../../layers/vector_layer/vector_layer'; +// @ts-ignore +import { createDefaultLayerDescriptor } from '../es_search_source'; +import { RenderWizardArguments } from '../../layers/layer_wizard_registry'; + +export const INDEX_SETUP_STEP_ID = 'INDEX_SETUP_STEP_ID'; +export const INDEXING_STEP_ID = 'INDEXING_STEP_ID'; + +enum INDEXING_STAGE { + READY = 'READY', + TRIGGERED = 'TRIGGERED', + SUCCESS = 'SUCCESS', + ERROR = 'ERROR', +} + +interface State { + indexingStage: INDEXING_STAGE | null; +} + +export class ClientFileCreateSourceEditor extends Component { + private _isMounted: boolean = false; + + state = { + indexingStage: null, + }; + + componentDidMount() { + this._isMounted = true; + } + + componentWillUnmount() { + this._isMounted = false; + } + + componentDidUpdate() { + if ( + this.props.currentStepId === INDEXING_STEP_ID && + this.state.indexingStage === INDEXING_STAGE.READY + ) { + this.setState({ indexingStage: INDEXING_STAGE.TRIGGERED }); + this.props.startStepLoading(); + } + } + + _onFileUpload = (geojsonFile: unknown, name: string) => { + if (!this._isMounted) { + return; + } + + if (!geojsonFile) { + this.props.previewLayers([]); + return; + } + + const sourceDescriptor = GeojsonFileSource.createDescriptor(geojsonFile, name); + const layerDescriptor = VectorLayer.createDescriptor( + { sourceDescriptor }, + this.props.mapColors + ); + this.props.previewLayers([layerDescriptor]); + }; + + _onIndexingComplete = (indexResponses: { indexDataResp: unknown; indexPatternResp: unknown }) => { + if (!this._isMounted) { + return; + } + + this.props.advanceToNextStep(); + + const { indexDataResp, indexPatternResp } = indexResponses; + + // @ts-ignore + const indexCreationFailed = !(indexDataResp && indexDataResp.success); + // @ts-ignore + const allDocsFailed = indexDataResp.failures.length === indexDataResp.docCount; + // @ts-ignore + const indexPatternCreationFailed = !(indexPatternResp && indexPatternResp.success); + if (indexCreationFailed || allDocsFailed || indexPatternCreationFailed) { + this.setState({ indexingStage: INDEXING_STAGE.ERROR }); + return; + } + + // @ts-ignore + const { fields, id: indexPatternId } = indexPatternResp; + const geoField = fields.find((field: IFieldType) => + [ES_GEO_FIELD_TYPE.GEO_POINT as string, ES_GEO_FIELD_TYPE.GEO_SHAPE as string].includes( + field.type + ) + ); + if (!indexPatternId || !geoField) { + this.setState({ indexingStage: INDEXING_STAGE.ERROR }); + this.props.previewLayers([]); + } else { + const esSearchSourceConfig = { + indexPatternId, + geoField: geoField.name, + // Only turn on bounds filter for large doc counts + // @ts-ignore + filterByMapBounds: indexDataResp.docCount > DEFAULT_MAX_RESULT_WINDOW, + scalingType: + geoField.type === ES_GEO_FIELD_TYPE.GEO_POINT + ? SCALING_TYPES.CLUSTERS + : SCALING_TYPES.LIMIT, + }; + this.setState({ indexingStage: INDEXING_STAGE.SUCCESS }); + this.props.previewLayers([ + createDefaultLayerDescriptor(esSearchSourceConfig, this.props.mapColors), + ]); + } + }; + + // Called on file upload screen when UI state changes + _onIndexReady = (indexReady: boolean) => { + if (!this._isMounted) { + return; + } + this.setState({ indexingStage: indexReady ? INDEXING_STAGE.READY : null }); + if (indexReady) { + this.props.enableNextBtn(); + } else { + this.props.disableNextBtn(); + } + }; + + // Called on file upload screen when upload file is changed or removed + _onFileRemove = () => { + this.props.previewLayers([]); + }; + + render() { + const FileUpload = getFileUploadComponent(); + return ( + + ); + } +} diff --git a/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx index 0a224f75b981d6..05b4b18eb3ed47 100644 --- a/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx @@ -6,102 +6,37 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; -import { IFieldType } from 'src/plugins/data/public'; -import { - ES_GEO_FIELD_TYPE, - DEFAULT_MAX_RESULT_WINDOW, - SCALING_TYPES, -} from '../../../../common/constants'; -// @ts-ignore -import { createDefaultLayerDescriptor } from '../es_search_source'; import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry'; -// @ts-ignore -import { ClientFileCreateSourceEditor } from './create_client_file_source_editor'; -// @ts-ignore -import { GeojsonFileSource } from './geojson_file_source'; -import { VectorLayer } from '../../layers/vector_layer/vector_layer'; +import { + ClientFileCreateSourceEditor, + INDEX_SETUP_STEP_ID, + INDEXING_STEP_ID, +} from './create_client_file_source_editor'; export const uploadLayerWizardConfig: LayerWizard = { categories: [], - description: i18n.translate('xpack.maps.source.geojsonFileDescription', { + description: i18n.translate('xpack.maps.fileUploadWizard.description', { defaultMessage: 'Index GeoJSON data in Elasticsearch', }), icon: 'importAction', - isIndexingSource: true, - renderWizard: ({ - previewLayers, - mapColors, - isIndexingTriggered, - onRemove, - onIndexReady, - importSuccessHandler, - importErrorHandler, - }: RenderWizardArguments) => { - function previewGeojsonFile(geojsonFile: unknown, name: string) { - if (!geojsonFile) { - previewLayers([]); - return; - } - const sourceDescriptor = GeojsonFileSource.createDescriptor(geojsonFile, name); - const layerDescriptor = VectorLayer.createDescriptor({ sourceDescriptor }, mapColors); - // TODO figure out a better way to handle passing this information back to layer_addpanel - previewLayers([layerDescriptor], true); - } - - function viewIndexedData(indexResponses: { - indexDataResp: unknown; - indexPatternResp: unknown; - }) { - const { indexDataResp, indexPatternResp } = indexResponses; - - // @ts-ignore - const indexCreationFailed = !(indexDataResp && indexDataResp.success); - // @ts-ignore - const allDocsFailed = indexDataResp.failures.length === indexDataResp.docCount; - // @ts-ignore - const indexPatternCreationFailed = !(indexPatternResp && indexPatternResp.success); - - if (indexCreationFailed || allDocsFailed || indexPatternCreationFailed) { - importErrorHandler(indexResponses); - return; - } - // @ts-ignore - const { fields, id: indexPatternId } = indexPatternResp; - const geoField = fields.find((field: IFieldType) => - [ES_GEO_FIELD_TYPE.GEO_POINT as string, ES_GEO_FIELD_TYPE.GEO_SHAPE as string].includes( - field.type - ) - ); - if (!indexPatternId || !geoField) { - previewLayers([]); - } else { - const esSearchSourceConfig = { - indexPatternId, - geoField: geoField.name, - // Only turn on bounds filter for large doc counts - // @ts-ignore - filterByMapBounds: indexDataResp.docCount > DEFAULT_MAX_RESULT_WINDOW, - scalingType: - geoField.type === ES_GEO_FIELD_TYPE.GEO_POINT - ? SCALING_TYPES.CLUSTERS - : SCALING_TYPES.LIMIT, - }; - previewLayers([createDefaultLayerDescriptor(esSearchSourceConfig, mapColors)]); - importSuccessHandler(indexResponses); - } - } - - return ( - - ); + prerequisiteSteps: [ + { + id: INDEX_SETUP_STEP_ID, + label: i18n.translate('xpack.maps.fileUploadWizard.importFileSetupLabel', { + defaultMessage: 'Import file', + }), + }, + { + id: INDEXING_STEP_ID, + label: i18n.translate('xpack.maps.fileUploadWizard.indexingLabel', { + defaultMessage: 'Importing file', + }), + }, + ], + renderWizard: (renderWizardArguments: RenderWizardArguments) => { + return ; }, - title: i18n.translate('xpack.maps.source.geojsonFileTitle', { + title: i18n.translate('xpack.maps.fileUploadWizard.title', { defaultMessage: 'Upload GeoJSON', }), }; diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/flyout_body.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/flyout_body.tsx index b287064938ce55..38474b84114fab 100644 --- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/flyout_body.tsx +++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/flyout_body.tsx @@ -15,25 +15,27 @@ type Props = RenderWizardArguments & { layerWizard: LayerWizard | null; onClear: () => void; onWizardSelect: (layerWizard: LayerWizard) => void; + showBackButton: boolean; }; export const FlyoutBody = (props: Props) => { function renderContent() { - if (!props.layerWizard) { + if (!props.layerWizard || !props.currentStepId) { return ; } const renderWizardArgs = { previewLayers: props.previewLayers, mapColors: props.mapColors, - isIndexingTriggered: props.isIndexingTriggered, - onRemove: props.onRemove, - onIndexReady: props.onIndexReady, - importSuccessHandler: props.importSuccessHandler, - importErrorHandler: props.importErrorHandler, + currentStepId: props.currentStepId, + enableNextBtn: props.enableNextBtn, + disableNextBtn: props.disableNextBtn, + startStepLoading: props.startStepLoading, + stopStepLoading: props.stopStepLoading, + advanceToNextStep: props.advanceToNextStep, }; - const backButton = props.isIndexingTriggered ? null : ( + const backButton = props.showBackButton ? ( { - ); + ) : null; return ( diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/index.ts b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/index.ts index d285c8ddebf3cb..2cc35abdb53eac 100644 --- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/index.ts +++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/index.ts @@ -6,25 +6,14 @@ import { connect } from 'react-redux'; import { FlyoutBody } from './flyout_body'; -import { INDEXING_STAGE } from '../../../reducers/ui'; -import { updateIndexingStage } from '../../../actions'; -import { getIndexingStage } from '../../../selectors/ui_selectors'; import { MapStoreState } from '../../../reducers/store'; import { getMapColors } from '../../../selectors/map_selectors'; function mapStateToProps(state: MapStoreState) { return { - isIndexingTriggered: getIndexingStage(state) === INDEXING_STAGE.TRIGGERED, mapColors: getMapColors(state), }; } -const mapDispatchToProps = { - onIndexReady: (indexReady: boolean) => - indexReady ? updateIndexingStage(INDEXING_STAGE.READY) : updateIndexingStage(null), - importSuccessHandler: () => updateIndexingStage(INDEXING_STAGE.SUCCESS), - importErrorHandler: () => updateIndexingStage(INDEXING_STAGE.ERROR), -}; - -const connected = connect(mapStateToProps, mapDispatchToProps)(FlyoutBody); +const connected = connect(mapStateToProps, {})(FlyoutBody); export { connected as FlyoutBody }; diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_footer/index.ts b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_footer/index.ts deleted file mode 100644 index 470e83f2d80900..00000000000000 --- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_footer/index.ts +++ /dev/null @@ -1,32 +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 { AnyAction, Dispatch } from 'redux'; -import { connect } from 'react-redux'; -import { FlyoutFooter } from './view'; -import { hasPreviewLayers, isLoadingPreviewLayers } from '../../../selectors/map_selectors'; -import { removePreviewLayers, updateFlyout } from '../../../actions'; -import { MapStoreState } from '../../../reducers/store'; -import { FLYOUT_STATE } from '../../../reducers/ui'; - -function mapStateToProps(state: MapStoreState) { - return { - hasPreviewLayers: hasPreviewLayers(state), - isLoading: isLoadingPreviewLayers(state), - }; -} - -function mapDispatchToProps(dispatch: Dispatch) { - return { - closeFlyout: () => { - dispatch(updateFlyout(FLYOUT_STATE.NONE)); - dispatch(removePreviewLayers()); - }, - }; -} - -const connectedFlyOut = connect(mapStateToProps, mapDispatchToProps)(FlyoutFooter); -export { connectedFlyOut as FlyoutFooter }; diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_footer/view.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_footer/view.tsx deleted file mode 100644 index 2e122324c50fb0..00000000000000 --- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_footer/view.tsx +++ /dev/null @@ -1,65 +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 { - EuiFlexGroup, - EuiFlexItem, - EuiFlyoutFooter, - EuiButtonEmpty, - EuiButton, -} from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; - -interface Props { - onClick: () => void; - showNextButton: boolean; - disableNextButton: boolean; - nextButtonText: string; - closeFlyout: () => void; - hasPreviewLayers: boolean; - isLoading: boolean; -} - -export const FlyoutFooter = ({ - onClick, - showNextButton, - disableNextButton, - nextButtonText, - closeFlyout, - hasPreviewLayers, - isLoading, -}: Props) => { - const nextButton = showNextButton ? ( - - {nextButtonText} - - ) : null; - - return ( - - - - - - - - {nextButton} - - - ); -}; diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts b/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts index 5527733f557103..8b5dc2a0e50bf7 100644 --- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts +++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/index.ts @@ -7,25 +7,22 @@ import { AnyAction, Dispatch } from 'redux'; import { connect } from 'react-redux'; import { AddLayerPanel } from './view'; -import { FLYOUT_STATE, INDEXING_STAGE } from '../../reducers/ui'; -import { getFlyoutDisplay, getIndexingStage } from '../../selectors/ui_selectors'; +import { FLYOUT_STATE } from '../../reducers/ui'; import { addPreviewLayers, promotePreviewLayers, + removePreviewLayers, setFirstPreviewLayerToSelectedLayer, updateFlyout, - updateIndexingStage, } from '../../actions'; import { MapStoreState } from '../../reducers/store'; import { LayerDescriptor } from '../../../common/descriptor_types'; +import { hasPreviewLayers, isLoadingPreviewLayers } from '../../selectors/map_selectors'; function mapStateToProps(state: MapStoreState) { - const indexingStage = getIndexingStage(state); return { - flyoutVisible: getFlyoutDisplay(state) !== FLYOUT_STATE.NONE, - isIndexingTriggered: indexingStage === INDEXING_STAGE.TRIGGERED, - isIndexingSuccess: indexingStage === INDEXING_STAGE.SUCCESS, - isIndexingReady: indexingStage === INDEXING_STAGE.READY, + hasPreviewLayers: hasPreviewLayers(state), + isLoadingPreviewLayers: isLoadingPreviewLayers(state), }; } @@ -39,8 +36,10 @@ function mapDispatchToProps(dispatch: Dispatch) { dispatch(updateFlyout(FLYOUT_STATE.LAYER_PANEL)); dispatch(promotePreviewLayers()); }, - setIndexingTriggered: () => dispatch(updateIndexingStage(INDEXING_STAGE.TRIGGERED)), - resetIndexing: () => dispatch(updateIndexingStage(null)), + closeFlyout: () => { + dispatch(updateFlyout(FLYOUT_STATE.NONE)); + dispatch(removePreviewLayers()); + }, }; } diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx index c1b6dcc1e12a6c..e2529fff66f3b5 100644 --- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx +++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/view.tsx @@ -4,141 +4,194 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { Component, Fragment } from 'react'; -import { EuiTitle, EuiFlyoutHeader } from '@elastic/eui'; +import React, { Component } from 'react'; +import { + EuiTitle, + EuiFlyoutHeader, + EuiFlyoutFooter, + EuiFlexGroup, + EuiFlexItem, + EuiButton, + EuiButtonEmpty, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FlyoutFooter } from './flyout_footer'; +import { FormattedMessage } from '@kbn/i18n/react'; import { FlyoutBody } from './flyout_body'; import { LayerDescriptor } from '../../../common/descriptor_types'; import { LayerWizard } from '../../classes/layers/layer_wizard_registry'; +const ADD_LAYER_STEP_ID = 'ADD_LAYER_STEP_ID'; +const ADD_LAYER_STEP_LABEL = i18n.translate('xpack.maps.addLayerPanel.addLayer', { + defaultMessage: 'Add layer', +}); +const SELECT_WIZARD_LABEL = ADD_LAYER_STEP_LABEL; + interface Props { - flyoutVisible: boolean; - isIndexingReady: boolean; - isIndexingSuccess: boolean; - isIndexingTriggered: boolean; addPreviewLayers: (layerDescriptors: LayerDescriptor[]) => void; + closeFlyout: () => void; + hasPreviewLayers: boolean; + isLoadingPreviewLayers: boolean; promotePreviewLayers: () => void; - resetIndexing: () => void; - setIndexingTriggered: () => void; } interface State { - importView: boolean; - isIndexingSource: boolean; - layerImportAddReady: boolean; + currentStepIndex: number; + currentStep: { id: string; label: string } | null; + layerSteps: Array<{ id: string; label: string }> | null; layerWizard: LayerWizard | null; + isNextStepBtnEnabled: boolean; + isStepLoading: boolean; } -export class AddLayerPanel extends Component { - private _isMounted: boolean = false; +const INITIAL_STATE: State = { + currentStepIndex: 0, + currentStep: null, + layerSteps: null, + layerWizard: null, + isNextStepBtnEnabled: false, + isStepLoading: false, +}; +export class AddLayerPanel extends Component { state = { - layerWizard: null, - isIndexingSource: false, - importView: false, - layerImportAddReady: false, + ...INITIAL_STATE, }; - componentDidMount() { - this._isMounted = true; - } - - componentWillUnmount() { - this._isMounted = false; - } - - componentDidUpdate() { - if (!this.state.layerImportAddReady && this.props.isIndexingSuccess) { - this.setState({ layerImportAddReady: true }); - } - } + _previewLayers = (layerDescriptors: LayerDescriptor[]) => { + this.props.addPreviewLayers(layerDescriptors); + }; - _previewLayers = (layerDescriptors: LayerDescriptor[], isIndexingSource?: boolean) => { - if (!this._isMounted) { - return; - } + _clearLayerWizard = () => { + this.setState(INITIAL_STATE); + this.props.addPreviewLayers([]); + }; - this.setState({ isIndexingSource: layerDescriptors.length ? !!isIndexingSource : false }); - this.props.addPreviewLayers(layerDescriptors); + _onWizardSelect = (layerWizard: LayerWizard) => { + const layerSteps = [ + ...(layerWizard.prerequisiteSteps ? layerWizard.prerequisiteSteps : []), + { + id: ADD_LAYER_STEP_ID, + label: ADD_LAYER_STEP_LABEL, + }, + ]; + this.setState({ + ...INITIAL_STATE, + layerWizard, + layerSteps, + currentStep: layerSteps[0], + }); }; - _clearLayerData = ({ keepSourceType = false }: { keepSourceType: boolean }) => { - if (!this._isMounted) { + _onNext = () => { + if (!this.state.layerSteps) { return; } - const newState: Partial = { - isIndexingSource: false, - }; - if (!keepSourceType) { - newState.layerWizard = null; - newState.importView = false; + if (this.state.layerSteps.length - 1 === this.state.currentStepIndex) { + // last step + this.props.promotePreviewLayers(); + } else { + this.setState((prevState) => { + const nextIndex = prevState.currentStepIndex + 1; + return { + currentStepIndex: nextIndex, + currentStep: prevState.layerSteps![nextIndex], + isNextStepBtnEnabled: false, + isStepLoading: false, + }; + }); } - // @ts-ignore - this.setState(newState); + }; - this.props.addPreviewLayers([]); + _enableNextBtn = () => { + this.setState({ isNextStepBtnEnabled: true }); }; - _onWizardSelect = (layerWizard: LayerWizard) => { - this.setState({ layerWizard, importView: !!layerWizard.isIndexingSource }); + _disableNextBtn = () => { + this.setState({ isNextStepBtnEnabled: false }); }; - _layerAddHandler = () => { - if (this.state.isIndexingSource && !this.props.isIndexingTriggered) { - this.props.setIndexingTriggered(); - } else { - this.props.promotePreviewLayers(); - if (this.state.importView) { - this.setState({ - layerImportAddReady: false, - }); - this.props.resetIndexing(); - } - } + _startStepLoading = () => { + this.setState({ isStepLoading: true }); }; - render() { - if (!this.props.flyoutVisible) { + _stopStepLoading = () => { + this.setState({ isStepLoading: false }); + }; + + _renderNextButton() { + if (!this.state.currentStep) { return null; } - const panelDescription = - this.state.layerImportAddReady || !this.state.importView - ? i18n.translate('xpack.maps.addLayerPanel.addLayer', { - defaultMessage: 'Add layer', - }) - : i18n.translate('xpack.maps.addLayerPanel.importFile', { - defaultMessage: 'Import file', - }); - const isNextBtnEnabled = this.state.importView - ? this.props.isIndexingReady || this.props.isIndexingSuccess - : true; + let isDisabled = !this.state.isNextStepBtnEnabled; + let isLoading = this.state.isStepLoading; + if (this.state.currentStep.id === ADD_LAYER_STEP_ID) { + isDisabled = !this.props.hasPreviewLayers; + isLoading = this.props.isLoadingPreviewLayers; + } else { + isDisabled = !this.state.isNextStepBtnEnabled; + isLoading = this.state.isStepLoading; + } return ( - + + + {this.state.currentStep.label} + + + ); + } + + render() { + return ( + <> -

{panelDescription}

+

{this.state.currentStep ? this.state.currentStep.label : SELECT_WIZARD_LABEL}

 this._clearLayerData({ keepSourceType: false })} - onRemove={() => this._clearLayerData({ keepSourceType: true })} + onClear={this._clearLayerWizard} onWizardSelect={this._onWizardSelect} previewLayers={this._previewLayers} + showBackButton={!this.state.isStepLoading} + currentStepId={this.state.currentStep ? this.state.currentStep.id : null} + enableNextBtn={this._enableNextBtn} + disableNextBtn={this._disableNextBtn} + startStepLoading={this._startStepLoading} + stopStepLoading={this._stopStepLoading} + advanceToNextStep={this._onNext} /> - - + + + + + + + + {this._renderNextButton()} + + + ); } } diff --git a/x-pack/plugins/maps/public/reducers/ui.ts b/x-pack/plugins/maps/public/reducers/ui.ts index ff521c92568b37..2ea0798d1e7687 100644 --- a/x-pack/plugins/maps/public/reducers/ui.ts +++ b/x-pack/plugins/maps/public/reducers/ui.ts @@ -15,7 +15,6 @@ import { SET_OPEN_TOC_DETAILS, SHOW_TOC_DETAILS, HIDE_TOC_DETAILS, - UPDATE_INDEXING_STAGE, } from '../actions'; export enum FLYOUT_STATE { @@ -25,13 +24,6 @@ export enum FLYOUT_STATE { MAP_SETTINGS_PANEL = 'MAP_SETTINGS_PANEL', } -export enum INDEXING_STAGE { - READY = 'READY', - TRIGGERED = 'TRIGGERED', - SUCCESS = 'SUCCESS', - ERROR = 'ERROR', -} - export type MapUiState = { flyoutDisplay: FLYOUT_STATE; isFullScreen: boolean; @@ -39,7 +31,6 @@ export type MapUiState = { isLayerTOCOpen: boolean; isSetViewOpen: boolean; openTOCDetails: string[]; - importIndexingStage: INDEXING_STAGE | null; }; export const DEFAULT_IS_LAYER_TOC_OPEN = true; @@ -53,7 +44,6 @@ export const DEFAULT_MAP_UI_STATE = { // storing TOC detail visibility outside of map.layerList because its UI state and not map rendering state. // This also makes for easy read/write access for embeddables. openTOCDetails: [], - importIndexingStage: null, }; // Reducer @@ -85,8 +75,6 @@ export function ui(state: MapUiState = DEFAULT_MAP_UI_STATE, action: any) { return layerId !== action.layerId; }), }; - case UPDATE_INDEXING_STAGE: - return { ...state, importIndexingStage: action.stage }; default: return state; } diff --git a/x-pack/plugins/maps/public/selectors/ui_selectors.ts b/x-pack/plugins/maps/public/selectors/ui_selectors.ts index 32d4beeb381d7f..a87fc60ec43eaa 100644 --- a/x-pack/plugins/maps/public/selectors/ui_selectors.ts +++ b/x-pack/plugins/maps/public/selectors/ui_selectors.ts @@ -6,7 +6,7 @@ import { MapStoreState } from '../reducers/store'; -import { FLYOUT_STATE, INDEXING_STAGE } from '../reducers/ui'; +import { FLYOUT_STATE } from '../reducers/ui'; export const getFlyoutDisplay = ({ ui }: MapStoreState): FLYOUT_STATE => ui.flyoutDisplay; export const getIsSetViewOpen = ({ ui }: MapStoreState): boolean => ui.isSetViewOpen; @@ -14,5 +14,3 @@ export const getIsLayerTOCOpen = ({ ui }: MapStoreState): boolean => ui.isLayerT export const getOpenTOCDetails = ({ ui }: MapStoreState): string[] => ui.openTOCDetails; export const getIsFullScreen = ({ ui }: MapStoreState): boolean => ui.isFullScreen; export const getIsReadOnly = ({ ui }: MapStoreState): boolean => ui.isReadOnly; -export const getIndexingStage = ({ ui }: MapStoreState): INDEXING_STAGE | null => - ui.importIndexingStage; diff --git a/x-pack/plugins/security_solution/common/constants.ts b/x-pack/plugins/security_solution/common/constants.ts index 58431e405ea8b6..4aff1c81c40f71 100644 --- a/x-pack/plugins/security_solution/common/constants.ts +++ b/x-pack/plugins/security_solution/common/constants.ts @@ -158,6 +158,12 @@ export const showAllOthersBucket: string[] = [ /** * CreateTemplateTimelineBtn + * https://github.com/elastic/kibana/pull/66613 * Remove the comment here to enable template timeline */ -export const disableTemplate = true; +export const disableTemplate = false; + +/* + * This should be set to true after https://github.com/elastic/kibana/pull/67496 is merged + */ +export const enableElasticFilter = false; diff --git a/x-pack/plugins/security_solution/common/types/timeline/index.ts b/x-pack/plugins/security_solution/common/types/timeline/index.ts index 4f255bb6d68341..2cf5930a83bee2 100644 --- a/x-pack/plugins/security_solution/common/types/timeline/index.ts +++ b/x-pack/plugins/security_solution/common/types/timeline/index.ts @@ -137,11 +137,13 @@ const SavedSortRuntimeType = runtimeTypes.partial({ export enum TimelineStatus { active = 'active', draft = 'draft', + immutable = 'immutable', } export const TimelineStatusLiteralRt = runtimeTypes.union([ runtimeTypes.literal(TimelineStatus.active), runtimeTypes.literal(TimelineStatus.draft), + runtimeTypes.literal(TimelineStatus.immutable), ]); const TimelineStatusLiteralWithNullRt = unionWithNullType(TimelineStatusLiteralRt); @@ -151,6 +153,29 @@ export type TimelineStatusLiteralWithNull = runtimeTypes.TypeOf< typeof TimelineStatusLiteralWithNullRt >; +/** + * Template timeline type + */ + +export enum TemplateTimelineType { + elastic = 'elastic', + custom = 'custom', +} + +export const TemplateTimelineTypeLiteralRt = runtimeTypes.union([ + runtimeTypes.literal(TemplateTimelineType.elastic), + runtimeTypes.literal(TemplateTimelineType.custom), +]); + +export const TemplateTimelineTypeLiteralWithNullRt = unionWithNullType( + TemplateTimelineTypeLiteralRt +); + +export type TemplateTimelineTypeLiteral = runtimeTypes.TypeOf; +export type TemplateTimelineTypeLiteralWithNull = runtimeTypes.TypeOf< + typeof TemplateTimelineTypeLiteralWithNullRt +>; + /* * Timeline Types */ @@ -273,6 +298,13 @@ export const TimelineResponseType = runtimeTypes.type({ }), }); +export const TimelineErrorResponseType = runtimeTypes.type({ + status_code: runtimeTypes.number, + message: runtimeTypes.string, +}); + +export interface TimelineErrorResponse + extends runtimeTypes.TypeOf {} export interface TimelineResponse extends runtimeTypes.TypeOf {} /** diff --git a/x-pack/plugins/security_solution/package.json b/x-pack/plugins/security_solution/package.json index 73347e00e6b34c..f2e39f2603ebef 100644 --- a/x-pack/plugins/security_solution/package.json +++ b/x-pack/plugins/security_solution/package.json @@ -13,7 +13,8 @@ "test:generate": "ts-node --project scripts/endpoint/cli_tsconfig.json scripts/endpoint/resolver_generator.ts" }, "devDependencies": { - "@types/lodash": "^4.14.110" + "@types/lodash": "^4.14.110", + "@types/md5": "^2.2.0" }, "dependencies": { "lodash": "^4.17.15", diff --git a/x-pack/plugins/security_solution/public/alerts/components/alerts_table/actions.test.tsx b/x-pack/plugins/security_solution/public/alerts/components/alerts_table/actions.test.tsx index 2fa7cfeedcd155..bd62b79a3c54e6 100644 --- a/x-pack/plugins/security_solution/public/alerts/components/alerts_table/actions.test.tsx +++ b/x-pack/plugins/security_solution/public/alerts/components/alerts_table/actions.test.tsx @@ -215,8 +215,8 @@ describe('alert actions', () => { columnId: '@timestamp', sortDirection: 'desc', }, - status: TimelineStatus.draft, - title: '', + status: TimelineStatus.active, + title: 'Test rule - Duplicate', timelineType: TimelineType.default, templateTimelineId: null, templateTimelineVersion: null, diff --git a/x-pack/plugins/security_solution/public/alerts/components/alerts_table/default_config.tsx b/x-pack/plugins/security_solution/public/alerts/components/alerts_table/default_config.tsx index 2029c5169c2cdc..6d82897aaf0102 100644 --- a/x-pack/plugins/security_solution/public/alerts/components/alerts_table/default_config.tsx +++ b/x-pack/plugins/security_solution/public/alerts/components/alerts_table/default_config.tsx @@ -8,6 +8,7 @@ import React from 'react'; import ApolloClient from 'apollo-client'; +import { Dispatch } from 'redux'; import { EuiText } from '@elastic/eui'; import { Status } from '../../../../common/detection_engine/schemas/common/schemas'; @@ -17,10 +18,12 @@ import { TimelineRowActionOnClick, } from '../../../timelines/components/timeline/body/actions'; import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers'; +import { getInvestigateInResolverAction } from '../../../timelines/components/timeline/body/helpers'; import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH, } from '../../../timelines/components/timeline/body/constants'; +import { DEFAULT_ICON_BUTTON_WIDTH } from '../../../timelines/components/timeline/helpers'; import { ColumnHeaderOptions, SubsetTimelineModel } from '../../../timelines/store/timeline/model'; import { timelineDefaults } from '../../../timelines/store/timeline/defaults'; @@ -174,23 +177,27 @@ export const getAlertActions = ({ apolloClient, canUserCRUD, createTimeline, + dispatch, hasIndexWrite, onAlertStatusUpdateFailure, onAlertStatusUpdateSuccess, setEventsDeleted, setEventsLoading, status, + timelineId, updateTimelineIsLoading, }: { apolloClient?: ApolloClient<{}>; canUserCRUD: boolean; createTimeline: CreateTimeline; + dispatch: Dispatch; hasIndexWrite: boolean; onAlertStatusUpdateFailure: (status: Status, error: Error) => void; onAlertStatusUpdateSuccess: (count: number, status: Status) => void; setEventsDeleted: ({ eventIds, isDeleted }: SetEventsDeletedProps) => void; setEventsLoading: ({ eventIds, isLoading }: SetEventsLoadingProps) => void; status: Status; + timelineId: string; updateTimelineIsLoading: UpdateTimelineLoading; }): TimelineRowAction[] => { const openAlertActionComponent: TimelineRowAction = { @@ -199,7 +206,7 @@ export const getAlertActions = ({ dataTestSubj: 'open-alert-status', displayType: 'contextMenu', id: FILTER_OPEN, - isActionDisabled: !canUserCRUD || !hasIndexWrite, + isActionDisabled: () => !canUserCRUD || !hasIndexWrite, onClick: ({ eventId }: TimelineRowActionOnClick) => updateAlertStatusAction({ alertIds: [eventId], @@ -210,7 +217,7 @@ export const getAlertActions = ({ status, selectedStatus: FILTER_OPEN, }), - width: 26, + width: DEFAULT_ICON_BUTTON_WIDTH, }; const closeAlertActionComponent: TimelineRowAction = { @@ -219,7 +226,7 @@ export const getAlertActions = ({ dataTestSubj: 'close-alert-status', displayType: 'contextMenu', id: FILTER_CLOSED, - isActionDisabled: !canUserCRUD || !hasIndexWrite, + isActionDisabled: () => !canUserCRUD || !hasIndexWrite, onClick: ({ eventId }: TimelineRowActionOnClick) => updateAlertStatusAction({ alertIds: [eventId], @@ -230,7 +237,7 @@ export const getAlertActions = ({ status, selectedStatus: FILTER_CLOSED, }), - width: 26, + width: DEFAULT_ICON_BUTTON_WIDTH, }; const inProgressAlertActionComponent: TimelineRowAction = { @@ -239,7 +246,7 @@ export const getAlertActions = ({ dataTestSubj: 'in-progress-alert-status', displayType: 'contextMenu', id: FILTER_IN_PROGRESS, - isActionDisabled: !canUserCRUD || !hasIndexWrite, + isActionDisabled: () => !canUserCRUD || !hasIndexWrite, onClick: ({ eventId }: TimelineRowActionOnClick) => updateAlertStatusAction({ alertIds: [eventId], @@ -250,10 +257,13 @@ export const getAlertActions = ({ status, selectedStatus: FILTER_IN_PROGRESS, }), - width: 26, + width: DEFAULT_ICON_BUTTON_WIDTH, }; return [ + { + ...getInvestigateInResolverAction({ dispatch, timelineId }), + }, { ariaLabel: 'Send alert to timeline', content: i18n.ACTION_INVESTIGATE_IN_TIMELINE, @@ -268,7 +278,7 @@ export const getAlertActions = ({ ecsData, updateTimelineIsLoading, }), - width: 26, + width: DEFAULT_ICON_BUTTON_WIDTH, }, // Context menu items ...(FILTER_OPEN !== status ? [openAlertActionComponent] : []), diff --git a/x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.test.tsx b/x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.test.tsx index f843bf68818465..9ff368aff2bf68 100644 --- a/x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.test.tsx @@ -7,37 +7,40 @@ import React from 'react'; import { shallow } from 'enzyme'; +import { TestProviders } from '../../../common/mock/test_providers'; import { TimelineId } from '../../../../common/types/timeline'; import { AlertsTableComponent } from './index'; describe('AlertsTableComponent', () => { it('renders correctly', () => { const wrapper = shallow( - + + + ); expect(wrapper.find('[title="Alerts"]')).toBeTruthy(); diff --git a/x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.tsx b/x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.tsx index ba6102312fef67..ec088c111e3bbc 100644 --- a/x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.tsx +++ b/x-pack/plugins/security_solution/public/alerts/components/alerts_table/index.tsx @@ -7,7 +7,7 @@ import { EuiPanel, EuiLoadingContent } from '@elastic/eui'; import { isEmpty } from 'lodash/fp'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { connect, ConnectedProps } from 'react-redux'; +import { connect, ConnectedProps, useDispatch } from 'react-redux'; import { Dispatch } from 'redux'; import { Status } from '../../../../common/detection_engine/schemas/common/schemas'; @@ -84,6 +84,7 @@ export const AlertsTableComponent: React.FC = ({ updateTimeline, updateTimelineIsLoading, }) => { + const dispatch = useDispatch(); const [selectAll, setSelectAll] = useState(false); const apolloClient = useApolloClient(); @@ -292,11 +293,13 @@ export const AlertsTableComponent: React.FC = ({ getAlertActions({ apolloClient, canUserCRUD, + dispatch, hasIndexWrite, createTimeline: createTimelineCallback, setEventsLoading: setEventsLoadingCallback, setEventsDeleted: setEventsDeletedCallback, status: filterGroup, + timelineId, updateTimelineIsLoading, onAlertStatusUpdateSuccess, onAlertStatusUpdateFailure, @@ -305,10 +308,12 @@ export const AlertsTableComponent: React.FC = ({ apolloClient, canUserCRUD, createTimelineCallback, + dispatch, hasIndexWrite, filterGroup, setEventsLoadingCallback, setEventsDeletedCallback, + timelineId, updateTimelineIsLoading, onAlertStatusUpdateSuccess, onAlertStatusUpdateFailure, diff --git a/x-pack/plugins/security_solution/public/alerts/components/no_write_alerts_callout/translations.ts b/x-pack/plugins/security_solution/public/alerts/components/no_write_alerts_callout/translations.ts index d036c422b2fb97..211bd21c915c00 100644 --- a/x-pack/plugins/security_solution/public/alerts/components/no_write_alerts_callout/translations.ts +++ b/x-pack/plugins/security_solution/public/alerts/components/no_write_alerts_callout/translations.ts @@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n'; export const NO_WRITE_ALERTS_CALLOUT_TITLE = i18n.translate( 'xpack.securitySolution.detectionEngine.noWriteAlertsCallOutTitle', { - defaultMessage: 'Alerts index permissions required', + defaultMessage: 'You cannot change alert states', } ); @@ -17,7 +17,7 @@ export const NO_WRITE_ALERTS_CALLOUT_MSG = i18n.translate( 'xpack.securitySolution.detectionEngine.noWriteAlertsCallOutMsg', { defaultMessage: - 'You are currently missing the required permissions to update alerts. Please contact your administrator for further assistance.', + 'You only have permissions to view alerts. If you need to update alert states (open or close alerts), contact your Kibana administrator.', } ); diff --git a/x-pack/plugins/security_solution/public/app/home/setup.tsx b/x-pack/plugins/security_solution/public/app/home/setup.tsx index 5b977a83302a97..bf7ce2ddf8b509 100644 --- a/x-pack/plugins/security_solution/public/app/home/setup.tsx +++ b/x-pack/plugins/security_solution/public/app/home/setup.tsx @@ -32,20 +32,7 @@ export const Setup: React.FunctionComponent<{ }); }; - const displayToast = () => { - notifications.toasts.addDanger({ - title, - text: defaultText, - }); - }; - - if (!ingestManager.success) { - if (ingestManager.error) { - displayToastWithModal(ingestManager.error.message); - } else { - displayToast(); - } - } + ingestManager.success.catch((error: Error) => displayToastWithModal(error.message)); }, [ingestManager, notifications.toasts]); return null; diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/callout.test.tsx b/x-pack/plugins/security_solution/public/cases/components/callout/callout.test.tsx new file mode 100644 index 00000000000000..7a344d9360b7d6 --- /dev/null +++ b/x-pack/plugins/security_solution/public/cases/components/callout/callout.test.tsx @@ -0,0 +1,89 @@ +/* + * 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 { CallOut, CallOutProps } from './callout'; + +describe('Callout', () => { + const defaultProps: CallOutProps = { + id: 'md5-hex', + type: 'primary', + title: 'a tittle', + messages: [ + { + id: 'generic-error', + title: 'message-one', + description:

{'error'}

, + }, + ], + showCallOut: true, + handleDismissCallout: jest.fn(), + }; + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('It renders the callout', () => { + const wrapper = mount(); + expect(wrapper.find(`[data-test-subj="case-callout-md5-hex"]`).exists()).toBeTruthy(); + expect(wrapper.find(`[data-test-subj="callout-messages-md5-hex"]`).exists()).toBeTruthy(); + expect(wrapper.find(`[data-test-subj="callout-dismiss-md5-hex"]`).exists()).toBeTruthy(); + }); + + it('hides the callout', () => { + const wrapper = mount(); + expect(wrapper.find(`[data-test-subj="case-callout-md5-hex"]`).exists()).toBeFalsy(); + }); + + it('does not shows any messages when the list is empty', () => { + const wrapper = mount(); + expect(wrapper.find(`[data-test-subj="callout-messages-md5-hex"]`).exists()).toBeFalsy(); + }); + + it('transform the button color correctly - primary', () => { + const wrapper = mount(); + const className = + wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('className') ?? + ''; + expect(className.includes('euiButton--primary')).toBeTruthy(); + }); + + it('transform the button color correctly - success', () => { + const wrapper = mount(); + const className = + wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('className') ?? + ''; + expect(className.includes('euiButton--secondary')).toBeTruthy(); + }); + + it('transform the button color correctly - warning', () => { + const wrapper = mount(); + const className = + wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('className') ?? + ''; + expect(className.includes('euiButton--warning')).toBeTruthy(); + }); + + it('transform the button color correctly - danger', () => { + const wrapper = mount(); + const className = + wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('className') ?? + ''; + expect(className.includes('euiButton--danger')).toBeTruthy(); + }); + + it('dismiss the callout correctly', () => { + const wrapper = mount(); + expect(wrapper.find(`[data-test-subj="callout-dismiss-md5-hex"]`).exists()).toBeTruthy(); + wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).simulate('click'); + wrapper.update(); + + expect(defaultProps.handleDismissCallout).toHaveBeenCalledWith('md5-hex', 'primary'); + }); +}); diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/callout.tsx b/x-pack/plugins/security_solution/public/cases/components/callout/callout.tsx new file mode 100644 index 00000000000000..e1ebe5c5db17e8 --- /dev/null +++ b/x-pack/plugins/security_solution/public/cases/components/callout/callout.tsx @@ -0,0 +1,53 @@ +/* + * 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 { EuiCallOut, EuiButton, EuiDescriptionList } from '@elastic/eui'; +import { isEmpty } from 'lodash/fp'; +import React, { memo, useCallback } from 'react'; + +import { ErrorMessage } from './types'; +import * as i18n from './translations'; + +export interface CallOutProps { + id: string; + type: NonNullable; + title: string; + messages: ErrorMessage[]; + showCallOut: boolean; + handleDismissCallout: (id: string, type: NonNullable) => void; +} + +const CallOutComponent = ({ + id, + type, + title, + messages, + showCallOut, + handleDismissCallout, +}: CallOutProps) => { + const handleCallOut = useCallback(() => handleDismissCallout(id, type), [ + handleDismissCallout, + id, + type, + ]); + + return showCallOut ? ( + + {!isEmpty(messages) && ( + + )} + + {i18n.DISMISS_CALLOUT} + + + ) : null; +}; + +export const CallOut = memo(CallOutComponent); diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/helpers.test.tsx b/x-pack/plugins/security_solution/public/cases/components/callout/helpers.test.tsx new file mode 100644 index 00000000000000..c5fb7f3fa44770 --- /dev/null +++ b/x-pack/plugins/security_solution/public/cases/components/callout/helpers.test.tsx @@ -0,0 +1,28 @@ +/* + * 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 md5 from 'md5'; +import { createCalloutId } from './helpers'; + +describe('createCalloutId', () => { + it('creates id correctly with one id', () => { + const digest = md5('one'); + const id = createCalloutId(['one']); + expect(id).toBe(digest); + }); + + it('creates id correctly with multiples ids', () => { + const digest = md5('one|two|three'); + const id = createCalloutId(['one', 'two', 'three']); + expect(id).toBe(digest); + }); + + it('creates id correctly with multiples ids and delimiter', () => { + const digest = md5('one,two,three'); + const id = createCalloutId(['one', 'two', 'three'], ','); + expect(id).toBe(digest); + }); +}); diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/helpers.tsx b/x-pack/plugins/security_solution/public/cases/components/callout/helpers.tsx index 32371042744732..23c1abda66a7c3 100644 --- a/x-pack/plugins/security_solution/public/cases/components/callout/helpers.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/callout/helpers.tsx @@ -3,10 +3,18 @@ * 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 md5 from 'md5'; import * as i18n from './translations'; +import { ErrorMessage } from './types'; -export const savedObjectReadOnly = { +export const savedObjectReadOnlyErrorMessage: ErrorMessage = { + id: 'read-only-privileges-error', title: i18n.READ_ONLY_SAVED_OBJECT_TITLE, - description: i18n.READ_ONLY_SAVED_OBJECT_MSG, + description: <>{i18n.READ_ONLY_SAVED_OBJECT_MSG}, + errorType: 'warning', }; + +export const createCalloutId = (ids: string[], delimiter: string = '|'): string => + md5(ids.join(delimiter)); diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/callout/index.test.tsx index ee3faeb2ceeb55..6d8917218c7c59 100644 --- a/x-pack/plugins/security_solution/public/cases/components/callout/index.test.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/callout/index.test.tsx @@ -7,104 +7,210 @@ import React from 'react'; import { mount } from 'enzyme'; -import { CaseCallOut } from '.'; +import { useMessagesStorage } from '../../../common/containers/local_storage/use_messages_storage'; +import { TestProviders } from '../../../common/mock'; +import { createCalloutId } from './helpers'; +import { CaseCallOut, CaseCallOutProps } from '.'; -const defaultProps = { - title: 'hey title', +jest.mock('../../../common/containers/local_storage/use_messages_storage'); + +const useSecurityLocalStorageMock = useMessagesStorage as jest.Mock; +const securityLocalStorageMock = { + getMessages: jest.fn(() => []), + addMessage: jest.fn(), }; describe('CaseCallOut ', () => { - it('Renders single message callout', () => { - const props = { - ...defaultProps, - message: 'we have one message', - }; - - const wrapper = mount(); - - expect(wrapper.find(`[data-test-subj="callout-message-primary"]`).last().exists()).toBeTruthy(); + beforeEach(() => { + jest.clearAllMocks(); + useSecurityLocalStorageMock.mockImplementation(() => securityLocalStorageMock); }); - it('Renders multi message callout', () => { - const props = { - ...defaultProps, + it('renders a callout correctly', () => { + const props: CaseCallOutProps = { + title: 'hey title', messages: [ - { ...defaultProps, description:

{'we have two messages'}

}, - { ...defaultProps, description:

{'for real'}

}, + { id: 'message-one', title: 'title', description:

{'we have two messages'}

}, + { id: 'message-two', title: 'title', description:

{'for real'}

}, ], }; - const wrapper = mount(); - expect(wrapper.find(`[data-test-subj="callout-message-primary"]`).last().exists()).toBeFalsy(); - expect( - wrapper.find(`[data-test-subj="callout-messages-primary"]`).last().exists() - ).toBeTruthy(); + const wrapper = mount( + + + + ); + + const id = createCalloutId(['message-one', 'message-two']); + expect(wrapper.find(`[data-test-subj="callout-messages-${id}"]`).last().exists()).toBeTruthy(); }); - it('it shows the correct type of callouts', () => { - const props = { - ...defaultProps, + it('groups the messages correctly', () => { + const props: CaseCallOutProps = { + title: 'hey title', messages: [ { - ...defaultProps, + id: 'message-one', + title: 'title one', description:

{'we have two messages'}

, - errorType: 'danger' as 'primary' | 'success' | 'warning' | 'danger', + errorType: 'danger', }, - { ...defaultProps, description:

{'for real'}

}, + { id: 'message-two', title: 'title two', description:

{'for real'}

}, ], }; - const wrapper = mount(); - expect(wrapper.find(`[data-test-subj="callout-messages-danger"]`).last().exists()).toBeTruthy(); + const wrapper = mount( + + + + ); + + const idDanger = createCalloutId(['message-one']); + const idPrimary = createCalloutId(['message-two']); + + expect( + wrapper.find(`[data-test-subj="case-callout-${idPrimary}"]`).last().exists() + ).toBeTruthy(); expect( - wrapper.find(`[data-test-subj="callout-messages-primary"]`).last().exists() + wrapper.find(`[data-test-subj="case-callout-${idDanger}"]`).last().exists() ).toBeTruthy(); }); - it('it applies the correct color to button', () => { - const props = { - ...defaultProps, + it('dismisses the callout correctly', () => { + const props: CaseCallOutProps = { + title: 'hey title', messages: [ - { - ...defaultProps, - description:

{'one'}

, - errorType: 'danger' as 'primary' | 'success' | 'warning' | 'danger', - }, - { - ...defaultProps, - description:

{'two'}

, - errorType: 'success' as 'primary' | 'success' | 'warning' | 'danger', - }, - { - ...defaultProps, - description:

{'three'}

, - errorType: 'primary' as 'primary' | 'success' | 'warning' | 'danger', - }, + { id: 'message-one', title: 'title', description:

{'we have two messages'}

}, ], }; + const wrapper = mount( + + + + ); - const wrapper = mount(); + const id = createCalloutId(['message-one']); + + expect(wrapper.find(`[data-test-subj="case-callout-${id}"]`).last().exists()).toBeTruthy(); + wrapper.find(`[data-test-subj="callout-dismiss-${id}"]`).last().simulate('click'); + expect(wrapper.find(`[data-test-subj="case-callout-${id}"]`).exists()).toBeFalsy(); + }); + + it('persist the callout of type primary when dismissed', () => { + const props: CaseCallOutProps = { + title: 'hey title', + messages: [ + { id: 'message-one', title: 'title', description:

{'we have two messages'}

}, + ], + }; - expect(wrapper.find(`[data-test-subj="callout-dismiss-danger"]`).first().prop('color')).toBe( - 'danger' + const wrapper = mount( + + + ); - expect(wrapper.find(`[data-test-subj="callout-dismiss-success"]`).first().prop('color')).toBe( - 'secondary' + const id = createCalloutId(['message-one']); + expect(securityLocalStorageMock.getMessages).toHaveBeenCalledWith('case'); + wrapper.find(`[data-test-subj="callout-dismiss-${id}"]`).last().simulate('click'); + expect(securityLocalStorageMock.addMessage).toHaveBeenCalledWith('case', id); + }); + + it('do not show the callout if is in the localStorage', () => { + const props: CaseCallOutProps = { + title: 'hey title', + messages: [ + { id: 'message-one', title: 'title', description:

{'we have two messages'}

}, + ], + }; + + const id = createCalloutId(['message-one']); + + useSecurityLocalStorageMock.mockImplementation(() => ({ + ...securityLocalStorageMock, + getMessages: jest.fn(() => [id]), + })); + + const wrapper = mount( + + + ); - expect(wrapper.find(`[data-test-subj="callout-dismiss-primary"]`).first().prop('color')).toBe( - 'primary' + expect(wrapper.find(`[data-test-subj="case-callout-${id}"]`).last().exists()).toBeFalsy(); + }); + + it('do not persist a callout of type danger', () => { + const props: CaseCallOutProps = { + title: 'hey title', + messages: [ + { + id: 'message-one', + title: 'title one', + description:

{'we have two messages'}

, + errorType: 'danger', + }, + ], + }; + + const wrapper = mount( + + + ); + + const id = createCalloutId(['message-one']); + wrapper.find(`button[data-test-subj="callout-dismiss-${id}"]`).simulate('click'); + wrapper.update(); + expect(securityLocalStorageMock.addMessage).not.toHaveBeenCalled(); }); - it('Dismisses callout', () => { - const props = { - ...defaultProps, - message: 'we have one message', + it('do not persist a callout of type warning', () => { + const props: CaseCallOutProps = { + title: 'hey title', + messages: [ + { + id: 'message-one', + title: 'title one', + description:

{'we have two messages'}

, + errorType: 'warning', + }, + ], }; - const wrapper = mount(); - expect(wrapper.find(`[data-test-subj="case-call-out-primary"]`).exists()).toBeTruthy(); - wrapper.find(`[data-test-subj="callout-dismiss-primary"]`).last().simulate('click'); - expect(wrapper.find(`[data-test-subj="case-call-out-primary"]`).exists()).toBeFalsy(); + + const wrapper = mount( + + + + ); + + const id = createCalloutId(['message-one']); + wrapper.find(`button[data-test-subj="callout-dismiss-${id}"]`).simulate('click'); + wrapper.update(); + expect(securityLocalStorageMock.addMessage).not.toHaveBeenCalled(); + }); + + it('do not persist a callout of type success', () => { + const props: CaseCallOutProps = { + title: 'hey title', + messages: [ + { + id: 'message-one', + title: 'title one', + description:

{'we have two messages'}

, + errorType: 'success', + }, + ], + }; + + const wrapper = mount( + + + + ); + + const id = createCalloutId(['message-one']); + wrapper.find(`button[data-test-subj="callout-dismiss-${id}"]`).simulate('click'); + wrapper.update(); + expect(securityLocalStorageMock.addMessage).not.toHaveBeenCalled(); }); }); diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/index.tsx b/x-pack/plugins/security_solution/public/cases/components/callout/index.tsx index 171c0508b9d926..cefaec6ad0b06e 100644 --- a/x-pack/plugins/security_solution/public/cases/components/callout/index.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/callout/index.tsx @@ -4,79 +4,99 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiCallOut, EuiButton, EuiDescriptionList, EuiSpacer } from '@elastic/eui'; -import { isEmpty } from 'lodash/fp'; -import React, { memo, useCallback, useState } from 'react'; +import { EuiSpacer } from '@elastic/eui'; +import React, { memo, useCallback, useState, useMemo } from 'react'; -import * as i18n from './translations'; +import { useMessagesStorage } from '../../../common/containers/local_storage/use_messages_storage'; +import { CallOut } from './callout'; +import { ErrorMessage } from './types'; +import { createCalloutId } from './helpers'; export * from './helpers'; -interface ErrorMessage { +export interface CaseCallOutProps { title: string; - description: JSX.Element; - errorType?: 'primary' | 'success' | 'warning' | 'danger'; + messages?: ErrorMessage[]; } -interface CaseCallOutProps { - title: string; - message?: string; - messages?: ErrorMessage[]; +type GroupByTypeMessages = { + [key in NonNullable]: { + messagesId: string[]; + messages: ErrorMessage[]; + }; +}; + +interface CalloutVisibility { + [index: string]: boolean; } -const CaseCallOutComponent = ({ title, message, messages }: CaseCallOutProps) => { - const [showCallOut, setShowCallOut] = useState(true); - const handleCallOut = useCallback(() => setShowCallOut(false), [setShowCallOut]); - let callOutMessages = messages ?? []; +const CaseCallOutComponent = ({ title, messages = [] }: CaseCallOutProps) => { + const { getMessages, addMessage } = useMessagesStorage(); + + const caseMessages = useMemo(() => getMessages('case'), [getMessages]); + const dismissedCallouts = useMemo( + () => + caseMessages.reduce( + (acc, id) => ({ + ...acc, + [id]: false, + }), + {} + ), + [caseMessages] + ); - if (message) { - callOutMessages = [ - ...callOutMessages, - { - title: '', - description:

{message}

, - errorType: 'primary', - }, - ]; - } + const [calloutVisibility, setCalloutVisibility] = useState(dismissedCallouts); + const handleCallOut = useCallback( + (id, type) => { + setCalloutVisibility((prevState) => ({ ...prevState, [id]: false })); + if (type === 'primary') { + addMessage('case', id); + } + }, + [setCalloutVisibility, addMessage] + ); - const groupedErrorMessages = callOutMessages.reduce((acc, currentMessage: ErrorMessage) => { - const key = currentMessage.errorType == null ? 'primary' : currentMessage.errorType; - return { - ...acc, - [key]: [...(acc[key] || []), currentMessage], - }; - }, {} as { [key in NonNullable]: ErrorMessage[] }); + const groupedByTypeErrorMessages = useMemo( + () => + messages.reduce( + (acc: GroupByTypeMessages, currentMessage: ErrorMessage) => { + const type = currentMessage.errorType == null ? 'primary' : currentMessage.errorType; + return { + ...acc, + [type]: { + messagesId: [...(acc[type]?.messagesId ?? []), currentMessage.id], + messages: [...(acc[type]?.messages ?? []), currentMessage], + }, + }; + }, + {} as GroupByTypeMessages + ), + [messages] + ); - return showCallOut ? ( + return ( <> - {(Object.keys(groupedErrorMessages) as Array).map((key) => ( - - - {!isEmpty(groupedErrorMessages[key]) && ( - ).map( + (type: NonNullable) => { + const id = createCalloutId(groupedByTypeErrorMessages[type].messagesId); + return ( + + - )} - - {i18n.DISMISS_CALLOUT} - - - - - ))} + + + ); + } + )} - ) : null; + ); }; export const CaseCallOut = memo(CaseCallOutComponent); diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/translations.ts b/x-pack/plugins/security_solution/public/cases/components/callout/translations.ts index 01956ca9429974..2ba3df82102e21 100644 --- a/x-pack/plugins/security_solution/public/cases/components/callout/translations.ts +++ b/x-pack/plugins/security_solution/public/cases/components/callout/translations.ts @@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n'; export const READ_ONLY_SAVED_OBJECT_TITLE = i18n.translate( 'xpack.securitySolution.case.readOnlySavedObjectTitle', { - defaultMessage: 'You have read-only feature privileges', + defaultMessage: 'You cannot open new or update existing cases', } ); @@ -17,7 +17,7 @@ export const READ_ONLY_SAVED_OBJECT_MSG = i18n.translate( 'xpack.securitySolution.case.readOnlySavedObjectDescription', { defaultMessage: - 'You are only allowed to view cases. If you need to open and update cases, contact your Kibana administrator', + 'You only have permissions to view cases. If you need to open and update cases, contact your Kibana administrator.', } ); diff --git a/x-pack/plugins/security_solution/public/cases/components/callout/types.ts b/x-pack/plugins/security_solution/public/cases/components/callout/types.ts new file mode 100644 index 00000000000000..1f07ef1bd9248b --- /dev/null +++ b/x-pack/plugins/security_solution/public/cases/components/callout/types.ts @@ -0,0 +1,12 @@ +/* + * 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. + */ + +export interface ErrorMessage { + id: string; + title: string; + description: JSX.Element; + errorType?: 'primary' | 'success' | 'warning' | 'danger'; +} diff --git a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/helpers.tsx b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/helpers.tsx index 919231d2f60340..43f2a2a6e12f11 100644 --- a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/helpers.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/helpers.tsx @@ -10,8 +10,10 @@ import React from 'react'; import * as i18n from './translations'; import { ActionLicense } from '../../containers/types'; +import { ErrorMessage } from '../callout/types'; export const getLicenseError = () => ({ + id: 'license-error', title: i18n.PUSH_DISABLE_BY_LICENSE_TITLE, description: ( ({ }); export const getKibanaConfigError = () => ({ + id: 'kibana-config-error', title: i18n.PUSH_DISABLE_BY_KIBANA_CONFIG_TITLE, description: ( ({ ), }); -export const getActionLicenseError = ( - actionLicense: ActionLicense | null -): Array<{ title: string; description: JSX.Element }> => { - let errors: Array<{ title: string; description: JSX.Element }> = []; +export const getActionLicenseError = (actionLicense: ActionLicense | null): ErrorMessage[] => { + let errors: ErrorMessage[] = []; if (actionLicense != null && !actionLicense.enabledInLicense) { errors = [...errors, getLicenseError()]; } diff --git a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx index f2de830a71644d..d17a2bd2159108 100644 --- a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx @@ -10,9 +10,7 @@ import { usePushToService, ReturnUsePushToService, UsePushToService } from '.'; import { TestProviders } from '../../../common/mock'; import { usePostPushToService } from '../../containers/use_post_push_to_service'; import { basicPush, actionLicenses } from '../../containers/mock'; -import * as i18n from './translations'; import { useGetActionLicense } from '../../containers/use_get_action_license'; -import { getKibanaConfigError, getLicenseError } from './helpers'; import { connectorsMock } from '../../containers/configure/mock'; jest.mock('react-router-dom', () => { @@ -110,7 +108,7 @@ describe('usePushToService', () => { await waitForNextUpdate(); const errorsMsg = result.current.pushCallouts?.props.messages; expect(errorsMsg).toHaveLength(1); - expect(errorsMsg[0].title).toEqual(getLicenseError().title); + expect(errorsMsg[0].id).toEqual('license-error'); }); }); @@ -132,7 +130,7 @@ describe('usePushToService', () => { await waitForNextUpdate(); const errorsMsg = result.current.pushCallouts?.props.messages; expect(errorsMsg).toHaveLength(1); - expect(errorsMsg[0].title).toEqual(getKibanaConfigError().title); + expect(errorsMsg[0].id).toEqual('kibana-config-error'); }); }); @@ -152,7 +150,7 @@ describe('usePushToService', () => { await waitForNextUpdate(); const errorsMsg = result.current.pushCallouts?.props.messages; expect(errorsMsg).toHaveLength(1); - expect(errorsMsg[0].title).toEqual(i18n.PUSH_DISABLE_BY_NO_CONFIG_TITLE); + expect(errorsMsg[0].id).toEqual('connector-missing-error'); }); }); @@ -171,7 +169,7 @@ describe('usePushToService', () => { await waitForNextUpdate(); const errorsMsg = result.current.pushCallouts?.props.messages; expect(errorsMsg).toHaveLength(1); - expect(errorsMsg[0].title).toEqual(i18n.PUSH_DISABLE_BY_NO_CASE_CONFIG_TITLE); + expect(errorsMsg[0].id).toEqual('connector-not-selected-error'); }); }); @@ -191,7 +189,7 @@ describe('usePushToService', () => { await waitForNextUpdate(); const errorsMsg = result.current.pushCallouts?.props.messages; expect(errorsMsg).toHaveLength(1); - expect(errorsMsg[0].title).toEqual(i18n.PUSH_DISABLE_BY_NO_CASE_CONFIG_TITLE); + expect(errorsMsg[0].id).toEqual('connector-deleted-error'); }); }); @@ -212,7 +210,7 @@ describe('usePushToService', () => { await waitForNextUpdate(); const errorsMsg = result.current.pushCallouts?.props.messages; expect(errorsMsg).toHaveLength(1); - expect(errorsMsg[0].title).toEqual(i18n.PUSH_DISABLE_BY_NO_CASE_CONFIG_TITLE); + expect(errorsMsg[0].id).toEqual('connector-deleted-error'); }); }); @@ -231,7 +229,7 @@ describe('usePushToService', () => { await waitForNextUpdate(); const errorsMsg = result.current.pushCallouts?.props.messages; expect(errorsMsg).toHaveLength(1); - expect(errorsMsg[0].title).toEqual(i18n.PUSH_DISABLE_BECAUSE_CASE_CLOSED_TITLE); + expect(errorsMsg[0].id).toEqual('closed-case-push-error'); }); }); }); diff --git a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.tsx b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.tsx index 45b515ccacacdc..7b4a29098bdded 100644 --- a/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.tsx @@ -20,6 +20,7 @@ import { Connector } from '../../../../../case/common/api/cases'; import { CaseServices } from '../../containers/use_get_case_user_actions'; import { LinkAnchor } from '../../../common/components/links'; import { SecurityPageName } from '../../../app/types'; +import { ErrorMessage } from '../callout/types'; export interface UsePushToService { caseId: string; @@ -76,11 +77,7 @@ export const usePushToService = ({ ); const errorsMsg = useMemo(() => { - let errors: Array<{ - title: string; - description: JSX.Element; - errorType?: 'primary' | 'success' | 'warning' | 'danger'; - }> = []; + let errors: ErrorMessage[] = []; if (actionLicense != null && !actionLicense.enabledInLicense) { errors = [...errors, getLicenseError()]; } @@ -88,6 +85,7 @@ export const usePushToService = ({ errors = [ ...errors, { + id: 'connector-missing-error', title: i18n.PUSH_DISABLE_BY_NO_CONFIG_TITLE, description: ( { {userPermissions != null && !userPermissions?.crud && userPermissions?.read && ( )} diff --git a/x-pack/plugins/security_solution/public/cases/pages/case_details.tsx b/x-pack/plugins/security_solution/public/cases/pages/case_details.tsx index 43c51b32bce0f8..c3538f0c18ed5b 100644 --- a/x-pack/plugins/security_solution/public/cases/pages/case_details.tsx +++ b/x-pack/plugins/security_solution/public/cases/pages/case_details.tsx @@ -15,7 +15,7 @@ import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana'; import { getCaseUrl } from '../../common/components/link_to'; import { navTabs } from '../../app/home/home_navigations'; import { CaseView } from '../components/case_view'; -import { savedObjectReadOnly, CaseCallOut } from '../components/callout'; +import { savedObjectReadOnlyErrorMessage, CaseCallOut } from '../components/callout'; export const CaseDetailsPage = React.memo(() => { const history = useHistory(); @@ -33,8 +33,8 @@ export const CaseDetailsPage = React.memo(() => { {userPermissions != null && !userPermissions?.crud && userPermissions?.read && ( )} diff --git a/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx index c7015ed81701ef..9c08e05ddfa399 100644 --- a/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx @@ -12,6 +12,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../mock'; import { createStore, State } from '../../store'; @@ -35,10 +36,22 @@ jest.mock('../../lib/kibana', () => ({ describe('AddFilterToGlobalSearchBar Component', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); mockAddFilters.mockClear(); }); diff --git a/x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx b/x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx index 251e0278b11bab..6d5471404ab4d1 100644 --- a/x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx +++ b/x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx @@ -5,13 +5,16 @@ */ import React, { useEffect, useMemo } from 'react'; +import { useDispatch } from 'react-redux'; import { Filter } from '../../../../../../../src/plugins/data/public'; import { TimelineIdLiteral } from '../../../../common/types/timeline'; import { StatefulEventsViewer } from '../events_viewer'; import { alertsDefaultModel } from './default_headers'; import { useManageTimeline } from '../../../timelines/components/manage_timeline'; +import { getInvestigateInResolverAction } from '../../../timelines/components/timeline/body/helpers'; import * as i18n from './translations'; + export interface OwnProps { end: number; id: string; @@ -64,8 +67,9 @@ const AlertsTableComponent: React.FC = ({ startDate, pageFilters = [], }) => { + const dispatch = useDispatch(); const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]); - const { initializeTimeline } = useManageTimeline(); + const { initializeTimeline, setTimelineRowActions } = useManageTimeline(); useEffect(() => { initializeTimeline({ @@ -75,6 +79,10 @@ const AlertsTableComponent: React.FC = ({ title: i18n.ALERTS_TABLE_TITLE, unit: i18n.UNIT, }); + setTimelineRowActions({ + id: timelineId, + timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId })], + }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/__snapshots__/page_view.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/endpoint/__snapshots__/page_view.test.tsx.snap index 6d8ea6b346eff5..096df5ceab2560 100644 --- a/x-pack/plugins/security_solution/public/common/components/endpoint/__snapshots__/page_view.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/common/components/endpoint/__snapshots__/page_view.test.tsx.snap @@ -2,11 +2,11 @@ exports[`PageView component should display body header custom element 1`] = ` .c0.endpoint--isListView { - padding: 0 70px 0 24px; + padding: 0 24px; } .c0.endpoint--isListView .endpoint-header { - padding: 24px 0; + padding: 24px; margin-bottom: 0; } @@ -22,7 +22,7 @@ exports[`PageView component should display body header custom element 1`] = ` } .c0 .endpoint-navTabs { - margin-left: 24px; + margin-left: 12px; } props.theme.eui.euiSizeL}; + padding: 0 ${(props) => props.theme.eui.euiSizeL}; .endpoint-header { - padding: ${(props) => props.theme.eui.euiSizeL} 0; + padding: ${(props) => props.theme.eui.euiSizeL}; margin-bottom: 0; } .endpoint-page-content { @@ -44,7 +43,7 @@ const StyledEuiPage = styled(EuiPage)` } } .endpoint-navTabs { - margin-left: ${(props) => props.theme.eui.euiSizeL}; + margin-left: ${(props) => props.theme.eui.euiSizeM}; } `; diff --git a/x-pack/plugins/security_solution/public/common/components/error_toast_dispatcher/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/error_toast_dispatcher/index.test.tsx index 4bc77555f09bdd..45b75d0f33ac9c 100644 --- a/x-pack/plugins/security_solution/public/common/components/error_toast_dispatcher/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/error_toast_dispatcher/index.test.tsx @@ -12,6 +12,7 @@ import { apolloClientObservable, mockGlobalState, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../mock'; import { createStore } from '../../store/store'; @@ -22,10 +23,22 @@ import { State } from '../../store/types'; describe('Error Toast Dispatcher', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('rendering', () => { diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx index 6b4baac0ff26c4..9e38b14c4334a5 100644 --- a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx +++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx @@ -7,6 +7,7 @@ import { EuiPanel } from '@elastic/eui'; import { getOr, isEmpty, union } from 'lodash/fp'; import React, { useEffect, useMemo, useState } from 'react'; +import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import deepEqual from 'fast-deep-equal'; @@ -34,6 +35,7 @@ import { } from '../../../../../../../src/plugins/data/public'; import { inputsModel } from '../../store'; import { useManageTimeline } from '../../../timelines/components/manage_timeline'; +import { getInvestigateInResolverAction } from '../../../timelines/components/timeline/body/helpers'; const DEFAULT_EVENTS_VIEWER_HEIGHT = 500; @@ -91,6 +93,7 @@ const EventsViewerComponent: React.FC = ({ toggleColumn, utilityBar, }) => { + const dispatch = useDispatch(); const columnsHeader = isEmpty(columns) ? defaultHeaders : columns; const kibana = useKibana(); const { filterManager } = useKibana().services.data.query; @@ -100,7 +103,16 @@ const EventsViewerComponent: React.FC = ({ getManageTimelineById, setIsTimelineLoading, setTimelineFilterManager, + setTimelineRowActions, } = useManageTimeline(); + + useEffect(() => { + setTimelineRowActions({ + id, + timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId: id })], + }); + }, [setTimelineRowActions, id, dispatch]); + useEffect(() => { setIsTimelineLoading({ id, isLoading: isQueryLoading }); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -179,9 +191,7 @@ const EventsViewerComponent: React.FC = ({ {headerFilterGroup} - {utilityBar?.(refetch, totalCountMinusDeleted)} - { beforeEach(() => { @@ -382,7 +382,7 @@ describe('Exception helpers', () => { describe('#getFormattedComments', () => { test('it returns formatted comment object with username and timestamp', () => { - const payload = getCommentsMock(); + const payload = getCommentsArrayMock(); const result = getFormattedComments(payload); expect(result[0].username).toEqual('some user'); @@ -390,7 +390,7 @@ describe('Exception helpers', () => { }); test('it returns formatted timeline icon with comment users initial', () => { - const payload = getCommentsMock(); + const payload = getCommentsArrayMock(); const result = getFormattedComments(payload); const wrapper = mount(result[0].timelineIcon as React.ReactElement); @@ -399,12 +399,12 @@ describe('Exception helpers', () => { }); test('it returns comment text', () => { - const payload = getCommentsMock(); + const payload = getCommentsArrayMock(); const result = getFormattedComments(payload); const wrapper = mount(result[0].children as React.ReactElement); - expect(wrapper.text()).toEqual('some comment'); + expect(wrapper.text()).toEqual('some old comment'); }); }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.tsx index 164940db619f9b..ae4131f9f62c22 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/helpers.tsx @@ -10,9 +10,10 @@ import { capitalize } from 'lodash'; import moment from 'moment'; import * as i18n from './translations'; -import { FormattedEntry, OperatorOption, DescriptionListItem, Comment } from './types'; +import { FormattedEntry, OperatorOption, DescriptionListItem } from './types'; import { EXCEPTION_OPERATORS, isOperator } from './operators'; import { + CommentsArray, Entry, EntriesArray, ExceptionListItemSchema, @@ -183,7 +184,7 @@ export const getDescriptionListContent = ( * * @param comments ExceptionItem.comments */ -export const getFormattedComments = (comments: Comment[]): EuiCommentProps[] => +export const getFormattedComments = (comments: CommentsArray): EuiCommentProps[] => comments.map((comment) => ({ username: comment.created_by, timestamp: moment(comment.created_at).format('on MMM Do YYYY @ HH:mm:ss'), diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/types.ts b/x-pack/plugins/security_solution/public/common/components/exceptions/types.ts index 24c328462ce2fe..ed2be64b4430fd 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/types.ts +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/types.ts @@ -26,12 +26,6 @@ export interface DescriptionListItem { description: NonNullable; } -export interface Comment { - created_by: string; - created_at: string; - comment: string; -} - export enum ExceptionListType { DETECTION_ENGINE = 'detection', ENDPOINT = 'endpoint', diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx index 3ea8507d82a157..f5b34b7838d25d 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx @@ -12,7 +12,7 @@ import moment from 'moment-timezone'; import { ExceptionDetails } from './exception_details'; import { getExceptionListItemSchemaMock } from '../../../../../../../lists/common/schemas/response/exception_list_item_schema.mock'; -import { getCommentsMock } from '../../../../../../../lists/common/schemas/types/comments.mock'; +import { getCommentsArrayMock } from '../../../../../../../lists/common/schemas/types/comments.mock'; describe('ExceptionDetails', () => { beforeEach(() => { @@ -42,7 +42,7 @@ describe('ExceptionDetails', () => { test('it renders comments button if comments exist', () => { const exceptionItem = getExceptionListItemSchemaMock(); - exceptionItem.comments = getCommentsMock(); + exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { test('it renders correct number of comments', () => { const exceptionItem = getExceptionListItemSchemaMock(); - exceptionItem.comments = [getCommentsMock()[0]]; + exceptionItem.comments = [getCommentsArrayMock()[0]]; const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { test('it renders comments plural if more than one', () => { const exceptionItem = getExceptionListItemSchemaMock(); - exceptionItem.comments = getCommentsMock(); + exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { test('it renders comments show text if "showComments" is false', () => { const exceptionItem = getExceptionListItemSchemaMock(); - exceptionItem.comments = getCommentsMock(); + exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { test('it renders comments hide text if "showComments" is true', () => { const exceptionItem = getExceptionListItemSchemaMock(); - exceptionItem.comments = getCommentsMock(); + exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { test('it invokes "onCommentsClick" when comments button clicked', () => { const mockOnCommentsClick = jest.fn(); const exceptionItem = getExceptionListItemSchemaMock(); - exceptionItem.comments = getCommentsMock(); + exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> ( ({ eui: euiLightVars, darkMode: false })}>{storyFn()} @@ -68,7 +68,7 @@ storiesOf('Components|ExceptionItem', module) const payload = getExceptionListItemSchemaMock(); payload._tags = []; payload.description = ''; - payload.comments = getCommentsMock(); + payload.comments = getCommentsArrayMock(); payload.entries = [ { field: 'actingProcess.file.signer', @@ -106,7 +106,7 @@ storiesOf('Components|ExceptionItem', module) }) .add('with everything', () => { const payload = getExceptionListItemSchemaMock(); - payload.comments = getCommentsMock(); + payload.comments = getCommentsArrayMock(); return ( { it('it renders ExceptionDetails and ExceptionEntries', () => { @@ -83,7 +83,7 @@ describe('ExceptionItem', () => { it('it renders comment accordion closed to begin with', () => { const mockOnDeleteException = jest.fn(); const exceptionItem = getExceptionListItemSchemaMock(); - exceptionItem.comments = getCommentsMock(); + exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { it('it renders comment accordion open when showComments is true', () => { const mockOnDeleteException = jest.fn(); const exceptionItem = getExceptionListItemSchemaMock(); - exceptionItem.comments = getCommentsMock(); + exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { state: state.inputs, }; - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); describe('Render', () => { beforeEach(() => { const myState = cloneDeep(state); myState.inputs = upsertQuery(newQuery); - store = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + myState, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); test('Eui Empty Button', () => { const wrapper = mount( @@ -146,7 +159,13 @@ describe('Inspect Button', () => { response: ['my response'], }; myState.inputs = upsertQuery(myQuery); - store = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + myState, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); test('Open Inspect Modal', () => { const wrapper = mount( diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts index 2c30f9a2e4ac32..ade76f8e243383 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts @@ -74,6 +74,7 @@ const getMockObject = ( timeline: { id: '', isOpen: false, + graphEventId: '', }, timerange: { global: { diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx index cab4ef8ead63f9..c2c94e192d9f7d 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/navigation/index.test.tsx @@ -81,6 +81,7 @@ describe('SIEM Navigation', () => { [CONSTANTS.timeline]: { id: '', isOpen: false, + graphEventId: '', }, }, }; @@ -160,6 +161,7 @@ describe('SIEM Navigation', () => { timeline: { id: '', isOpen: false, + graphEventId: '', }, timerange: { global: { @@ -266,7 +268,7 @@ describe('SIEM Navigation', () => { search: '', state: undefined, tabName: 'authentications', - timeline: { id: '', isOpen: false }, + timeline: { id: '', isOpen: false, graphEventId: '' }, timerange: { global: { linkTo: ['timeline'], diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx index 977c7808b6c86e..f345346d620cb1 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/index.test.tsx @@ -71,6 +71,7 @@ describe('Tab Navigation', () => { [CONSTANTS.timeline]: { id: '', isOpen: false, + graphEventId: '', }, }; test('it mounts with correct tab highlighted', () => { @@ -128,6 +129,7 @@ describe('Tab Navigation', () => { [CONSTANTS.timeline]: { id: '', isOpen: false, + graphEventId: '', }, }; test('it mounts with correct tab highlighted', () => { diff --git a/x-pack/plugins/security_solution/public/common/components/stat_items/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/stat_items/index.test.tsx index 50721ef3b26ad7..f548275b36e709 100644 --- a/x-pack/plugins/security_solution/public/common/components/stat_items/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/stat_items/index.test.tsx @@ -34,6 +34,7 @@ import { mockGlobalState, apolloClientObservable, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../mock'; import { State, createStore } from '../../store'; @@ -55,7 +56,13 @@ describe('Stat Items Component', () => { const theme = () => ({ eui: euiDarkVars, darkMode: true }); const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - const store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + const store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); describe.each([ [ diff --git a/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx index 19321622d75fa8..164ca177ee91ad 100644 --- a/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx @@ -14,6 +14,7 @@ import { apolloClientObservable, mockGlobalState, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../mock'; import { createUseUiSetting$Mock } from '../../mock/kibana_react'; @@ -81,11 +82,23 @@ describe('SIEM Super Date Picker', () => { describe('#SuperDatePicker', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { jest.clearAllMocks(); - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); mockUseUiSetting$.mockImplementation((key, defaultValue) => { const useUiSetting$Mock = createUseUiSetting$Mock(); diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx index ae25e66b2af866..336f906b3bed04 100644 --- a/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx @@ -13,6 +13,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../mock'; import { createKibanaCoreStartMock } from '../../mock/kibana_core'; @@ -156,7 +157,13 @@ const state: State = { }; const { storage } = createSecuritySolutionStorageMock(); -const store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); +const store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage +); describe('StatefulTopN', () => { // Suppress warnings about "react-beautiful-dnd" diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts b/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts index c270a99d3c51e5..7f4267bc5e2b34 100644 --- a/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts +++ b/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts @@ -126,8 +126,9 @@ export const makeMapStateToProps = () => { ? { id: flyoutTimeline.savedObjectId != null ? flyoutTimeline.savedObjectId : '', isOpen: flyoutTimeline.show, + graphEventId: flyoutTimeline.graphEventId ?? '', } - : { id: '', isOpen: false }; + : { id: '', isOpen: false, graphEventId: '' }; let searchAttr: { [CONSTANTS.appQuery]?: Query; diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/initialize_redux_by_url.tsx b/x-pack/plugins/security_solution/public/common/components/url_state/initialize_redux_by_url.tsx index efd6221bbfbd02..ab03e2199474c6 100644 --- a/x-pack/plugins/security_solution/public/common/components/url_state/initialize_redux_by_url.tsx +++ b/x-pack/plugins/security_solution/public/common/components/url_state/initialize_redux_by_url.tsx @@ -81,6 +81,7 @@ export const dispatchSetInitialStateFromUrl = ( queryTimelineById({ apolloClient, duplicate: false, + graphEventId: timeline.graphEventId, timelineId: timeline.id, openTimeline: timeline.isOpen, updateIsLoading: updateTimelineIsLoading, diff --git a/x-pack/plugins/security_solution/public/common/containers/local_storage/use_messages_storage.test.tsx b/x-pack/plugins/security_solution/public/common/containers/local_storage/use_messages_storage.test.tsx new file mode 100644 index 00000000000000..d52bc4b1a267d9 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/containers/local_storage/use_messages_storage.test.tsx @@ -0,0 +1,85 @@ +/* + * 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 { renderHook, act } from '@testing-library/react-hooks'; +import { useKibana } from '../../lib/kibana'; +import { createUseKibanaMock } from '../../mock/kibana_react'; +import { useMessagesStorage, UseMessagesStorage } from './use_messages_storage'; + +jest.mock('../../lib/kibana'); +const useKibanaMock = useKibana as jest.Mock; + +describe('useLocalStorage', () => { + beforeEach(() => { + const services = { ...createUseKibanaMock()().services }; + useKibanaMock.mockImplementation(() => ({ services })); + services.storage.store.clear(); + }); + + it('should return an empty array when there is no messages', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook(() => + useMessagesStorage() + ); + await waitForNextUpdate(); + const { getMessages } = result.current; + expect(getMessages('case')).toEqual([]); + }); + }); + + it('should add a message', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook(() => + useMessagesStorage() + ); + await waitForNextUpdate(); + const { getMessages, addMessage } = result.current; + addMessage('case', 'id-1'); + expect(getMessages('case')).toEqual(['id-1']); + }); + }); + + it('should add multiple messages', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook(() => + useMessagesStorage() + ); + await waitForNextUpdate(); + const { getMessages, addMessage } = result.current; + addMessage('case', 'id-1'); + addMessage('case', 'id-2'); + expect(getMessages('case')).toEqual(['id-1', 'id-2']); + }); + }); + + it('should remove a message', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook(() => + useMessagesStorage() + ); + await waitForNextUpdate(); + const { getMessages, addMessage, removeMessage } = result.current; + addMessage('case', 'id-1'); + addMessage('case', 'id-2'); + removeMessage('case', 'id-2'); + expect(getMessages('case')).toEqual(['id-1']); + }); + }); + + it('should clear all messages', async () => { + await act(async () => { + const { result, waitForNextUpdate } = renderHook(() => + useMessagesStorage() + ); + await waitForNextUpdate(); + const { getMessages, addMessage, clearAllMessages } = result.current; + addMessage('case', 'id-1'); + addMessage('case', 'id-2'); + clearAllMessages('case'); + expect(getMessages('case')).toEqual([]); + }); + }); +}); diff --git a/x-pack/plugins/security_solution/public/common/containers/local_storage/use_messages_storage.tsx b/x-pack/plugins/security_solution/public/common/containers/local_storage/use_messages_storage.tsx new file mode 100644 index 00000000000000..0c96712ad9c53c --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/containers/local_storage/use_messages_storage.tsx @@ -0,0 +1,52 @@ +/* + * 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 { useCallback } from 'react'; +import { useKibana } from '../../lib/kibana'; + +export interface UseMessagesStorage { + getMessages: (plugin: string) => string[]; + addMessage: (plugin: string, id: string) => void; + removeMessage: (plugin: string, id: string) => void; + clearAllMessages: (plugin: string) => void; +} + +export const useMessagesStorage = (): UseMessagesStorage => { + const { storage } = useKibana().services; + + const getMessages = useCallback( + (plugin: string): string[] => storage.get(`${plugin}-messages`) ?? [], + [storage] + ); + + const addMessage = useCallback( + (plugin: string, id: string) => { + const pluginStorage = storage.get(`${plugin}-messages`) ?? []; + storage.set(`${plugin}-messages`, [...pluginStorage, id]); + }, + [storage] + ); + + const removeMessage = useCallback( + (plugin: string, id: string) => { + const pluginStorage = storage.get(`${plugin}-messages`) ?? []; + storage.set(`${plugin}-messages`, [...pluginStorage.filter((val: string) => val !== id)]); + }, + [storage] + ); + + const clearAllMessages = useCallback( + (plugin: string): string[] => storage.remove(`${plugin}-messages`), + [storage] + ); + + return { + getMessages, + addMessage, + clearAllMessages, + removeMessage, + }; +}; diff --git a/x-pack/plugins/security_solution/public/common/lib/compose/kibana_compose.tsx b/x-pack/plugins/security_solution/public/common/lib/compose/kibana_compose.tsx index 47834f148c9102..342db7f43943d4 100644 --- a/x-pack/plugins/security_solution/public/common/lib/compose/kibana_compose.tsx +++ b/x-pack/plugins/security_solution/public/common/lib/compose/kibana_compose.tsx @@ -9,10 +9,10 @@ import ApolloClient from 'apollo-client'; import { ApolloLink } from 'apollo-link'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { CoreStart } from '../../../../../../../src/core/public'; import introspectionQueryResultData from '../../../graphql/introspection.json'; import { AppFrontendLibs } from '../lib'; import { getLinks } from './helpers'; +import { CoreStart } from '../../../../../../../src/core/public'; export function composeLibs(core: CoreStart): AppFrontendLibs { const cache = new InMemoryCache({ diff --git a/x-pack/plugins/security_solution/public/common/mock/endpoint/app_context_render.tsx b/x-pack/plugins/security_solution/public/common/mock/endpoint/app_context_render.tsx index 1db63897a88633..779d5eff0b971b 100644 --- a/x-pack/plugins/security_solution/public/common/mock/endpoint/app_context_render.tsx +++ b/x-pack/plugins/security_solution/public/common/mock/endpoint/app_context_render.tsx @@ -13,7 +13,7 @@ import { coreMock } from '../../../../../../../src/core/public/mocks'; import { StartPlugins } from '../../../types'; import { depsStartMock } from './dependencies_start_mock'; import { MiddlewareActionSpyHelper, createSpyMiddleware } from '../../store/test_utils'; -import { apolloClientObservable } from '../test_providers'; +import { apolloClientObservable, kibanaObservable } from '../test_providers'; import { createStore, State, substateMiddlewareFactory } from '../../store'; import { alertMiddlewareFactory } from '../../../endpoint_alerts/store/middleware'; import { AppRootProvider } from './app_root_provider'; @@ -58,14 +58,21 @@ export const createAppRootMockRenderer = (): AppContextTestRender => { const middlewareSpy = createSpyMiddleware(); const { storage } = createSecuritySolutionStorageMock(); - const store = createStore(mockGlobalState, SUB_PLUGINS_REDUCER, apolloClientObservable, storage, [ - substateMiddlewareFactory( - (globalState) => globalState.alertList, - alertMiddlewareFactory(coreStart, depsStart) - ), - ...managementMiddlewareFactory(coreStart, depsStart), - middlewareSpy.actionSpyMiddleware, - ]); + const store = createStore( + mockGlobalState, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage, + [ + substateMiddlewareFactory( + (globalState) => globalState.alertList, + alertMiddlewareFactory(coreStart, depsStart) + ), + ...managementMiddlewareFactory(coreStart, depsStart), + middlewareSpy.actionSpyMiddleware, + ] + ); const MockKibanaContextProvider = createKibanaContextProviderMock(); diff --git a/x-pack/plugins/security_solution/public/common/mock/endpoint/dependencies_start_mock.ts b/x-pack/plugins/security_solution/public/common/mock/endpoint/dependencies_start_mock.ts index 759ec45c7e54be..f2e8d045eccf9f 100644 --- a/x-pack/plugins/security_solution/public/common/mock/endpoint/dependencies_start_mock.ts +++ b/x-pack/plugins/security_solution/public/common/mock/endpoint/dependencies_start_mock.ts @@ -56,6 +56,6 @@ export const depsStartMock: () => DepsStartMock = () => { return { data: dataMock, - ingestManager: { success: true, registerDatasource }, + ingestManager: { success: Promise.resolve(true), registerDatasource }, }; }; diff --git a/x-pack/plugins/security_solution/public/common/mock/kibana_react.ts b/x-pack/plugins/security_solution/public/common/mock/kibana_react.ts index cc8970d4df5b41..c5d50e1379482b 100644 --- a/x-pack/plugins/security_solution/public/common/mock/kibana_react.ts +++ b/x-pack/plugins/security_solution/public/common/mock/kibana_react.ts @@ -26,6 +26,8 @@ import { DEFAULT_INDEX_PATTERN, } from '../../../common/constants'; import { createKibanaCoreStartMock, createKibanaPluginsStartMock } from './kibana_core'; +import { StartServices } from '../../types'; +import { createSecuritySolutionStorageMock } from './mock_local_storage'; // eslint-disable-next-line @typescript-eslint/no-explicit-any export const mockUiSettings: Record = { @@ -70,10 +72,13 @@ export const createUseUiSetting$Mock = () => { ): [T, () => void] | undefined => [useUiSettingMock(key, defaultValue), jest.fn()]; }; +export const createKibanaObservable$Mock = createKibanaCoreStartMock; + export const createUseKibanaMock = () => { const core = createKibanaCoreStartMock(); const plugins = createKibanaPluginsStartMock(); const useUiSetting = createUseUiSettingMock(); + const { storage } = createSecuritySolutionStorageMock(); const services = { ...core, @@ -82,11 +87,42 @@ export const createUseKibanaMock = () => { ...core.uiSettings, get: useUiSetting, }, + storage, }; return () => ({ services }); }; +export const createStartServices = () => { + const core = createKibanaCoreStartMock(); + const plugins = createKibanaPluginsStartMock(); + const security = { + authc: { + getCurrentUser: jest.fn(), + areAPIKeysEnabled: jest.fn(), + }, + sessionTimeout: { + start: jest.fn(), + stop: jest.fn(), + extend: jest.fn(), + }, + license: { + isEnabled: jest.fn(), + getFeatures: jest.fn(), + features$: jest.fn(), + }, + __legacyCompat: { logoutUrl: 'logoutUrl', tenant: 'tenant' }, + }; + + const services = ({ + ...core, + ...plugins, + security, + } as unknown) as StartServices; + + return services; +}; + export const createWithKibanaMock = () => { const kibana = createUseKibanaMock()(); diff --git a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx index 0573f049c35c53..297dc235a2a50b 100644 --- a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx +++ b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx @@ -19,7 +19,7 @@ import { ThemeProvider } from 'styled-components'; import { createStore, State } from '../store'; import { mockGlobalState } from './global_state'; -import { createKibanaContextProviderMock } from './kibana_react'; +import { createKibanaContextProviderMock, createStartServices } from './kibana_react'; import { FieldHook, useForm } from '../../shared_imports'; import { SUB_PLUGINS_REDUCER } from './utils'; import { createSecuritySolutionStorageMock, localStorageMock } from './mock_local_storage'; @@ -38,6 +38,7 @@ export const apolloClient = new ApolloClient({ }); export const apolloClientObservable = new BehaviorSubject(apolloClient); +export const kibanaObservable = new BehaviorSubject(createStartServices()); Object.defineProperty(window, 'localStorage', { value: localStorageMock(), @@ -49,7 +50,13 @@ const { storage } = createSecuritySolutionStorageMock(); /** A utility for wrapping children in the providers required to run most tests */ const TestProvidersComponent: React.FC = ({ children, - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage), + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ), onDragEnd = jest.fn(), }) => ( @@ -69,7 +76,13 @@ export const TestProviders = React.memo(TestProvidersComponent); const TestProviderWithoutDragAndDropComponent: React.FC = ({ children, - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage), + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ), }) => ( {children} diff --git a/x-pack/plugins/security_solution/public/common/store/store.ts b/x-pack/plugins/security_solution/public/common/store/store.ts index 5f53724b287df8..a39c9f18bcdb8d 100644 --- a/x-pack/plugins/security_solution/public/common/store/store.ts +++ b/x-pack/plugins/security_solution/public/common/store/store.ts @@ -29,6 +29,7 @@ import { AppAction } from './actions'; import { Immutable } from '../../../common/endpoint/types'; import { State } from './types'; import { Storage } from '../../../../../../src/plugins/kibana_utils/public'; +import { CoreStart } from '../../../../../../src/core/public'; type ComposeType = typeof compose; declare global { @@ -49,6 +50,7 @@ export const createStore = ( state: PreloadedState, pluginsReducer: SubPluginsInitReducer, apolloClient: Observable, + kibana: Observable, storage: Storage, additionalMiddleware?: Array>>> ): Store => { @@ -56,6 +58,7 @@ export const createStore = ( const middlewareDependencies = { apolloClient$: apolloClient, + kibana$: kibana, selectAllTimelineQuery: inputsSelectors.globalQueryByIdSelector, selectNotesByIdSelector: appSelectors.selectNotesByIdSelector, timelineByIdSelector: timelineSelectors.timelineByIdSelector, diff --git a/x-pack/plugins/security_solution/public/common/store/types.ts b/x-pack/plugins/security_solution/public/common/store/types.ts index 2b92451e30119b..d1e8df0f982c4f 100644 --- a/x-pack/plugins/security_solution/public/common/store/types.ts +++ b/x-pack/plugins/security_solution/public/common/store/types.ts @@ -19,23 +19,22 @@ import { NetworkPluginState } from '../../network/store'; import { EndpointAlertsPluginState } from '../../endpoint_alerts'; import { ManagementPluginState } from '../../management'; +export type StoreState = HostsPluginState & + NetworkPluginState & + TimelinePluginState & + EndpointAlertsPluginState & + ManagementPluginState & { + app: AppState; + dragAndDrop: DragAndDropState; + inputs: InputsState; + }; /** * The redux `State` type for the Security App. * We use `CombinedState` to wrap our shape because we create our reducer using `combineReducers`. * `combineReducers` returns a type wrapped in `CombinedState`. * `CombinedState` is required for redux to know what keys to make optional when preloaded state into a store. */ -export type State = CombinedState< - HostsPluginState & - NetworkPluginState & - TimelinePluginState & - EndpointAlertsPluginState & - ManagementPluginState & { - app: AppState; - dragAndDrop: DragAndDropState; - inputs: InputsState; - } ->; +export type State = CombinedState; export type KueryFilterQueryKind = 'kuery' | 'lucene'; diff --git a/x-pack/plugins/security_solution/public/common/utils/timeline/use_show_timeline.tsx b/x-pack/plugins/security_solution/public/common/utils/timeline/use_show_timeline.tsx index fde3f6f8b222d8..a9c6660ba9c68b 100644 --- a/x-pack/plugins/security_solution/public/common/utils/timeline/use_show_timeline.tsx +++ b/x-pack/plugins/security_solution/public/common/utils/timeline/use_show_timeline.tsx @@ -7,7 +7,7 @@ import { useState, useEffect } from 'react'; import { useRouteSpy } from '../route/use_route_spy'; -const hideTimelineForRoutes = [`/cases/configure`]; +const hideTimelineForRoutes = [`/cases/configure`, '/management']; export const useShowTimeline = () => { const [{ pageName, pathName }] = useRouteSpy(); diff --git a/x-pack/plugins/security_solution/public/endpoint_alerts/view/test_helpers/render_alert_page.tsx b/x-pack/plugins/security_solution/public/endpoint_alerts/view/test_helpers/render_alert_page.tsx index acfe3f228c21fb..f03c72518305d3 100644 --- a/x-pack/plugins/security_solution/public/endpoint_alerts/view/test_helpers/render_alert_page.tsx +++ b/x-pack/plugins/security_solution/public/endpoint_alerts/view/test_helpers/render_alert_page.tsx @@ -19,6 +19,7 @@ import { SUB_PLUGINS_REDUCER, mockGlobalState, apolloClientObservable, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; @@ -31,7 +32,13 @@ export const alertPageTestRender = () => { * Create a store, with the middleware disabled. We don't want side effects being created by our code in this test. */ const { storage } = createSecuritySolutionStorageMock(); - const store = createStore(mockGlobalState, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + const store = createStore( + mockGlobalState, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); const depsStart = depsStartMock(); depsStart.data.ui.SearchBar.mockImplementation(() =>
); diff --git a/x-pack/plugins/security_solution/public/graphql/introspection.json b/x-pack/plugins/security_solution/public/graphql/introspection.json index 3c8c7c21d72a02..69356f8fc8aa74 100644 --- a/x-pack/plugins/security_solution/public/graphql/introspection.json +++ b/x-pack/plugins/security_solution/public/graphql/introspection.json @@ -255,6 +255,18 @@ "description": "", "type": { "kind": "ENUM", "name": "TimelineType", "ofType": null }, "defaultValue": null + }, + { + "name": "templateTimelineType", + "description": "", + "type": { "kind": "ENUM", "name": "TemplateTimelineType", "ofType": null }, + "defaultValue": null + }, + { + "name": "status", + "description": "", + "type": { "kind": "ENUM", "name": "TimelineStatus", "ofType": null }, + "defaultValue": null } ], "type": { @@ -3570,6 +3582,14 @@ "isDeprecated": false, "deprecationReason": null }, + { + "name": "agent", + "description": "", + "args": [], + "type": { "kind": "OBJECT", "name": "AgentEcsField", "ofType": null }, + "isDeprecated": false, + "deprecationReason": null + }, { "name": "auditd", "description": "", @@ -3760,6 +3780,25 @@ "enumValues": null, "possibleTypes": null }, + { + "kind": "OBJECT", + "name": "AgentEcsField", + "description": "", + "fields": [ + { + "name": "type", + "description": "", + "args": [], + "type": { "kind": "SCALAR", "name": "ToStringArray", "ofType": null }, + "isDeprecated": false, + "deprecationReason": null + } + ], + "inputFields": null, + "interfaces": [], + "enumValues": null, + "possibleTypes": null + }, { "kind": "OBJECT", "name": "AuditdEcsFields", @@ -5728,6 +5767,14 @@ "isDeprecated": false, "deprecationReason": null }, + { + "name": "entity_id", + "description": "", + "args": [], + "type": { "kind": "SCALAR", "name": "ToStringArray", "ofType": null }, + "isDeprecated": false, + "deprecationReason": null + }, { "name": "executable", "description": "", @@ -10370,7 +10417,13 @@ "interfaces": null, "enumValues": [ { "name": "active", "description": "", "isDeprecated": false, "deprecationReason": null }, - { "name": "draft", "description": "", "isDeprecated": false, "deprecationReason": null } + { "name": "draft", "description": "", "isDeprecated": false, "deprecationReason": null }, + { + "name": "immutable", + "description": "", + "isDeprecated": false, + "deprecationReason": null + } ], "possibleTypes": null }, @@ -10494,6 +10547,24 @@ ], "possibleTypes": null }, + { + "kind": "ENUM", + "name": "TemplateTimelineType", + "description": "", + "fields": null, + "inputFields": null, + "interfaces": null, + "enumValues": [ + { + "name": "elastic", + "description": "", + "isDeprecated": false, + "deprecationReason": null + }, + { "name": "custom", "description": "", "isDeprecated": false, "deprecationReason": null } + ], + "possibleTypes": null + }, { "kind": "OBJECT", "name": "ResponseTimelines", @@ -10522,6 +10593,46 @@ "type": { "kind": "SCALAR", "name": "Float", "ofType": null }, "isDeprecated": false, "deprecationReason": null + }, + { + "name": "defaultTimelineCount", + "description": "", + "args": [], + "type": { "kind": "SCALAR", "name": "Float", "ofType": null }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "templateTimelineCount", + "description": "", + "args": [], + "type": { "kind": "SCALAR", "name": "Float", "ofType": null }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "elasticTemplateTimelineCount", + "description": "", + "args": [], + "type": { "kind": "SCALAR", "name": "Float", "ofType": null }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "customTemplateTimelineCount", + "description": "", + "args": [], + "type": { "kind": "SCALAR", "name": "Float", "ofType": null }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "favoriteCount", + "description": "", + "args": [], + "type": { "kind": "SCALAR", "name": "Float", "ofType": null }, + "isDeprecated": false, + "deprecationReason": null } ], "inputFields": null, diff --git a/x-pack/plugins/security_solution/public/graphql/types.ts b/x-pack/plugins/security_solution/public/graphql/types.ts index dc4a8ae78bf46d..1171e937935368 100644 --- a/x-pack/plugins/security_solution/public/graphql/types.ts +++ b/x-pack/plugins/security_solution/public/graphql/types.ts @@ -345,6 +345,7 @@ export enum TlsFields { export enum TimelineStatus { active = 'active', draft = 'draft', + immutable = 'immutable', } export enum TimelineType { @@ -359,6 +360,11 @@ export enum SortFieldTimeline { created = 'created', } +export enum TemplateTimelineType { + elastic = 'elastic', + custom = 'custom', +} + export enum NetworkDirectionEcs { inbound = 'inbound', outbound = 'outbound', @@ -763,6 +769,8 @@ export interface Ecs { _index?: Maybe; + agent?: Maybe; + auditd?: Maybe; destination?: Maybe; @@ -810,6 +818,10 @@ export interface Ecs { system?: Maybe; } +export interface AgentEcsField { + type?: Maybe; +} + export interface AuditdEcsFields { result?: Maybe; @@ -1265,6 +1277,8 @@ export interface ProcessEcsFields { args?: Maybe; + entity_id?: Maybe; + executable?: Maybe; title?: Maybe; @@ -2109,6 +2123,16 @@ export interface ResponseTimelines { timeline: (Maybe)[]; totalCount?: Maybe; + + defaultTimelineCount?: Maybe; + + templateTimelineCount?: Maybe; + + elasticTemplateTimelineCount?: Maybe; + + customTemplateTimelineCount?: Maybe; + + favoriteCount?: Maybe; } export interface Mutation { @@ -2246,6 +2270,10 @@ export interface GetAllTimelineQueryArgs { onlyUserFavorite?: Maybe; timelineType?: Maybe; + + templateTimelineType?: Maybe; + + status?: Maybe; } export interface AuthenticationsSourceArgs { timerange: TimerangeInput; @@ -4307,6 +4335,8 @@ export namespace GetAllTimeline { sort?: Maybe; onlyUserFavorite?: Maybe; timelineType?: Maybe; + templateTimelineType?: Maybe; + status?: Maybe; }; export type Query = { @@ -4320,6 +4350,16 @@ export namespace GetAllTimeline { totalCount: Maybe; + defaultTimelineCount: Maybe; + + templateTimelineCount: Maybe; + + elasticTemplateTimelineCount: Maybe; + + customTemplateTimelineCount: Maybe; + + favoriteCount: Maybe; + timeline: (Maybe)[]; }; @@ -4605,6 +4645,8 @@ export namespace GetTimelineQuery { event: Maybe; + agent: Maybe; + auditd: Maybe; file: Maybe; @@ -4730,6 +4772,12 @@ export namespace GetTimelineQuery { type: Maybe; }; + export type Agent = { + __typename?: 'AgentEcsField'; + + type: Maybe; + }; + export type Auditd = { __typename?: 'AuditdEcsFields'; @@ -5155,6 +5203,8 @@ export namespace GetTimelineQuery { args: Maybe; + entity_id: Maybe; + executable: Maybe; title: Maybe; diff --git a/x-pack/plugins/security_solution/public/hosts/components/authentications_table/index.test.tsx b/x-pack/plugins/security_solution/public/hosts/components/authentications_table/index.test.tsx index 3809d848759cc3..9603f30615a123 100644 --- a/x-pack/plugins/security_solution/public/hosts/components/authentications_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/hosts/components/authentications_table/index.test.tsx @@ -13,6 +13,7 @@ import { apolloClientObservable, mockGlobalState, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { createStore, State } from '../../../common/store'; @@ -26,10 +27,22 @@ describe('Authentication Table Component', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('rendering', () => { diff --git a/x-pack/plugins/security_solution/public/hosts/components/hosts_table/index.test.tsx b/x-pack/plugins/security_solution/public/hosts/components/hosts_table/index.test.tsx index 1231c35f214603..ab00e77a4fa433 100644 --- a/x-pack/plugins/security_solution/public/hosts/components/hosts_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/hosts/components/hosts_table/index.test.tsx @@ -15,6 +15,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { useMountAppended } from '../../../common/utils/use_mount_appended'; @@ -40,11 +41,23 @@ describe('Hosts Table', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); const mount = useMountAppended(); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('rendering', () => { diff --git a/x-pack/plugins/security_solution/public/hosts/pages/hosts.test.tsx b/x-pack/plugins/security_solution/public/hosts/pages/hosts.test.tsx index ea0b32137eb395..1ea3a3020a1d5d 100644 --- a/x-pack/plugins/security_solution/public/hosts/pages/hosts.test.tsx +++ b/x-pack/plugins/security_solution/public/hosts/pages/hosts.test.tsx @@ -16,6 +16,7 @@ import { TestProviders, mockGlobalState, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../common/mock'; import { SiemNavigation } from '../../common/components/navigation'; @@ -154,7 +155,13 @@ describe('Hosts - rendering', () => { }); const myState: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - const myStore = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + const myStore = createStore( + myState, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); const wrapper = mount( diff --git a/x-pack/plugins/security_solution/public/lists_plugin_deps.ts b/x-pack/plugins/security_solution/public/lists_plugin_deps.ts index 575ff26330a460..f3a724a755a48e 100644 --- a/x-pack/plugins/security_solution/public/lists_plugin_deps.ts +++ b/x-pack/plugins/security_solution/public/lists_plugin_deps.ts @@ -15,6 +15,7 @@ export { UseExceptionListSuccess, } from '../../lists/public'; export { + CommentsArray, ExceptionListSchema, ExceptionListItemSchema, Entry, diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx index 224411c5f7ec0d..7bc101b8914775 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx @@ -34,6 +34,12 @@ describe('when on the hosts page', () => { render = () => mockedContext.render(); }); + it('should NOT display timeline', async () => { + const renderResult = render(); + const timelineFlyout = await renderResult.queryByTestId('flyoutOverlay'); + expect(timelineFlyout).toBeNull(); + }); + it('should show a table', async () => { const renderResult = render(); const table = await renderResult.findByTestId('hostListTable'); diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/reducer.ts b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/reducer.ts index 75e7808ea30b1d..b3b74c2ca9dae5 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/reducer.ts +++ b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/reducer.ts @@ -78,13 +78,20 @@ export const policyDetailsReducer: ImmutableReducer { let http: ReturnType; @@ -59,76 +61,7 @@ describe('ingest service', () => { describe('sendGetEndpointSecurityPackage()', () => { it('should query EPM with category=security', async () => { - http.get.mockResolvedValue({ - response: [ - { - name: 'endpoint', - title: 'Elastic Endpoint', - version: '0.5.0', - description: 'This is the Elastic Endpoint package.', - type: 'solution', - download: '/epr/endpoint/endpoint-0.5.0.tar.gz', - path: '/package/endpoint/0.5.0', - icons: [ - { - src: '/package/endpoint/0.5.0/img/logo-endpoint-64-color.svg', - size: '16x16', - type: 'image/svg+xml', - }, - ], - status: 'installed', - savedObject: { - type: 'epm-packages', - id: 'endpoint', - attributes: { - installed: [ - { id: '826759f0-7074-11ea-9bc8-6b38f4d29a16', type: 'dashboard' }, - { id: '1cfceda0-728b-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, - { id: '1e525190-7074-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, - { id: '55387750-729c-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, - { id: '92b1edc0-706a-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, - { id: 'a3a3bd10-706b-11ea-9bc8-6b38f4d29a16', type: 'map' }, - { id: 'logs-endpoint.alerts', type: 'index-template' }, - { id: 'events-endpoint', type: 'index-template' }, - { id: 'logs-endpoint.events.file', type: 'index-template' }, - { id: 'logs-endpoint.events.library', type: 'index-template' }, - { id: 'metrics-endpoint.metadata', type: 'index-template' }, - { id: 'metrics-endpoint.metadata_mirror', type: 'index-template' }, - { id: 'logs-endpoint.events.network', type: 'index-template' }, - { id: 'metrics-endpoint.policy', type: 'index-template' }, - { id: 'logs-endpoint.events.process', type: 'index-template' }, - { id: 'logs-endpoint.events.registry', type: 'index-template' }, - { id: 'logs-endpoint.events.security', type: 'index-template' }, - { id: 'metrics-endpoint.telemetry', type: 'index-template' }, - ], - es_index_patterns: { - alerts: 'logs-endpoint.alerts-*', - events: 'events-endpoint-*', - file: 'logs-endpoint.events.file-*', - library: 'logs-endpoint.events.library-*', - metadata: 'metrics-endpoint.metadata-*', - metadata_mirror: 'metrics-endpoint.metadata_mirror-*', - network: 'logs-endpoint.events.network-*', - policy: 'metrics-endpoint.policy-*', - process: 'logs-endpoint.events.process-*', - registry: 'logs-endpoint.events.registry-*', - security: 'logs-endpoint.events.security-*', - telemetry: 'metrics-endpoint.telemetry-*', - }, - name: 'endpoint', - version: '0.5.0', - internal: false, - removable: false, - }, - references: [], - updated_at: '2020-06-24T14:41:23.098Z', - version: 'Wzc0LDFd', - score: 0, - }, - }, - ], - success: true, - }); + http.get.mockReturnValue(apiPathMockResponseProviders[INGEST_API_EPM_PACKAGES]()); await sendGetEndpointSecurityPackage(http); expect(http.get).toHaveBeenCalledWith('/api/ingest_manager/epm/packages', { query: { category: 'security' }, diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_list/test_mock_utils.ts b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_list/test_mock_utils.ts index 0f0d1cb1b559d8..46f84d296bd4eb 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_list/test_mock_utils.ts +++ b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_list/test_mock_utils.ts @@ -16,6 +16,82 @@ import { const generator = new EndpointDocGenerator('policy-list'); +/** + * a list of API paths response mock providers + */ +export const apiPathMockResponseProviders = { + [INGEST_API_EPM_PACKAGES]: () => + Promise.resolve({ + response: [ + { + name: 'endpoint', + title: 'Elastic Endpoint', + version: '0.5.0', + description: 'This is the Elastic Endpoint package.', + type: 'solution', + download: '/epr/endpoint/endpoint-0.5.0.tar.gz', + path: '/package/endpoint/0.5.0', + icons: [ + { + src: '/package/endpoint/0.5.0/img/logo-endpoint-64-color.svg', + size: '16x16', + type: 'image/svg+xml', + }, + ], + status: 'installed' as InstallationStatus, + savedObject: { + type: 'epm-packages', + id: 'endpoint', + attributes: { + installed: [ + { id: '826759f0-7074-11ea-9bc8-6b38f4d29a16', type: 'dashboard' }, + { id: '1cfceda0-728b-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, + { id: '1e525190-7074-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, + { id: '55387750-729c-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, + { id: '92b1edc0-706a-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, + { id: 'a3a3bd10-706b-11ea-9bc8-6b38f4d29a16', type: 'map' }, + { id: 'logs-endpoint.alerts', type: 'index-template' }, + { id: 'events-endpoint', type: 'index-template' }, + { id: 'logs-endpoint.events.file', type: 'index-template' }, + { id: 'logs-endpoint.events.library', type: 'index-template' }, + { id: 'metrics-endpoint.metadata', type: 'index-template' }, + { id: 'metrics-endpoint.metadata_mirror', type: 'index-template' }, + { id: 'logs-endpoint.events.network', type: 'index-template' }, + { id: 'metrics-endpoint.policy', type: 'index-template' }, + { id: 'logs-endpoint.events.process', type: 'index-template' }, + { id: 'logs-endpoint.events.registry', type: 'index-template' }, + { id: 'logs-endpoint.events.security', type: 'index-template' }, + { id: 'metrics-endpoint.telemetry', type: 'index-template' }, + ] as AssetReference[], + es_index_patterns: { + alerts: 'logs-endpoint.alerts-*', + events: 'events-endpoint-*', + file: 'logs-endpoint.events.file-*', + library: 'logs-endpoint.events.library-*', + metadata: 'metrics-endpoint.metadata-*', + metadata_mirror: 'metrics-endpoint.metadata_mirror-*', + network: 'logs-endpoint.events.network-*', + policy: 'metrics-endpoint.policy-*', + process: 'logs-endpoint.events.process-*', + registry: 'logs-endpoint.events.registry-*', + security: 'logs-endpoint.events.security-*', + telemetry: 'metrics-endpoint.telemetry-*', + }, + name: 'endpoint', + version: '0.5.0', + internal: false, + removable: false, + }, + references: [], + updated_at: '2020-06-24T14:41:23.098Z', + version: 'Wzc0LDFd', + }, + }, + ], + success: true, + }), +}; + /** * It sets the mock implementation on the necessary http methods to support the policy list view * @param mockedHttpService @@ -38,76 +114,8 @@ export const setPolicyListApiMockImplementation = ( }); } - if (path === INGEST_API_EPM_PACKAGES) { - return Promise.resolve({ - response: [ - { - name: 'endpoint', - title: 'Elastic Endpoint', - version: '0.5.0', - description: 'This is the Elastic Endpoint package.', - type: 'solution', - download: '/epr/endpoint/endpoint-0.5.0.tar.gz', - path: '/package/endpoint/0.5.0', - icons: [ - { - src: '/package/endpoint/0.5.0/img/logo-endpoint-64-color.svg', - size: '16x16', - type: 'image/svg+xml', - }, - ], - status: 'installed' as InstallationStatus, - savedObject: { - type: 'epm-packages', - id: 'endpoint', - attributes: { - installed: [ - { id: '826759f0-7074-11ea-9bc8-6b38f4d29a16', type: 'dashboard' }, - { id: '1cfceda0-728b-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, - { id: '1e525190-7074-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, - { id: '55387750-729c-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, - { id: '92b1edc0-706a-11ea-9bc8-6b38f4d29a16', type: 'visualization' }, - { id: 'a3a3bd10-706b-11ea-9bc8-6b38f4d29a16', type: 'map' }, - { id: 'logs-endpoint.alerts', type: 'index-template' }, - { id: 'events-endpoint', type: 'index-template' }, - { id: 'logs-endpoint.events.file', type: 'index-template' }, - { id: 'logs-endpoint.events.library', type: 'index-template' }, - { id: 'metrics-endpoint.metadata', type: 'index-template' }, - { id: 'metrics-endpoint.metadata_mirror', type: 'index-template' }, - { id: 'logs-endpoint.events.network', type: 'index-template' }, - { id: 'metrics-endpoint.policy', type: 'index-template' }, - { id: 'logs-endpoint.events.process', type: 'index-template' }, - { id: 'logs-endpoint.events.registry', type: 'index-template' }, - { id: 'logs-endpoint.events.security', type: 'index-template' }, - { id: 'metrics-endpoint.telemetry', type: 'index-template' }, - ] as AssetReference[], - es_index_patterns: { - alerts: 'logs-endpoint.alerts-*', - events: 'events-endpoint-*', - file: 'logs-endpoint.events.file-*', - library: 'logs-endpoint.events.library-*', - metadata: 'metrics-endpoint.metadata-*', - metadata_mirror: 'metrics-endpoint.metadata_mirror-*', - network: 'logs-endpoint.events.network-*', - policy: 'metrics-endpoint.policy-*', - process: 'logs-endpoint.events.process-*', - registry: 'logs-endpoint.events.registry-*', - security: 'logs-endpoint.events.security-*', - telemetry: 'metrics-endpoint.telemetry-*', - }, - name: 'endpoint', - version: '0.5.0', - internal: false, - removable: false, - }, - references: [], - updated_at: '2020-06-24T14:41:23.098Z', - version: 'Wzc0LDFd', - }, - }, - ], - success: true, - }); + if (apiPathMockResponseProviders[path]) { + return apiPathMockResponseProviders[path](); } } return Promise.reject(new Error(`MOCK: unknown policy list api: ${path}`)); diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx index 315e3d29b6df20..984639f0f599d6 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx @@ -9,8 +9,9 @@ import { mount } from 'enzyme'; import { PolicyDetails } from './policy_details'; import { EndpointDocGenerator } from '../../../../../common/endpoint/generate_data'; -import { createAppRootMockRenderer } from '../../../../common/mock/endpoint'; +import { AppContextTestRender, createAppRootMockRenderer } from '../../../../common/mock/endpoint'; import { getPolicyDetailPath, getPoliciesPath } from '../../../common/routing'; +import { apiPathMockResponseProviders } from '../store/policy_list/test_mock_utils'; describe('Policy Details', () => { type FindReactWrapperResponse = ReturnType['find']>; @@ -19,29 +20,50 @@ describe('Policy Details', () => { const policyListPathUrl = getPoliciesPath(); const sleep = (ms = 100) => new Promise((wakeup) => setTimeout(wakeup, ms)); const generator = new EndpointDocGenerator(); - const { history, AppWrapper, coreStart } = createAppRootMockRenderer(); - const http = coreStart.http; - const render = (ui: Parameters[0]) => mount(ui, { wrappingComponent: AppWrapper }); + let history: AppContextTestRender['history']; + let coreStart: AppContextTestRender['coreStart']; + let middlewareSpy: AppContextTestRender['middlewareSpy']; + let http: typeof coreStart.http; + let render: (ui: Parameters[0]) => ReturnType; let policyDatasource: ReturnType; let policyView: ReturnType; - beforeEach(() => jest.clearAllMocks()); + beforeEach(() => { + const appContextMockRenderer = createAppRootMockRenderer(); + const AppWrapper = appContextMockRenderer.AppWrapper; + + ({ history, coreStart, middlewareSpy } = appContextMockRenderer); + render = (ui) => mount(ui, { wrappingComponent: AppWrapper }); + http = coreStart.http; + }); afterEach(() => { if (policyView) { policyView.unmount(); } + jest.clearAllMocks(); }); describe('when displayed with invalid id', () => { + let releaseApiFailure: () => void; beforeEach(() => { - http.get.mockReturnValue(Promise.reject(new Error('policy not found'))); + http.get.mockImplementationOnce(async () => { + await new Promise((_, reject) => { + releaseApiFailure = reject.bind(null, new Error('policy not found')); + }); + }); history.push(policyDetailsPathUrl); policyView = render(); }); - it('should show loader followed by error message', () => { + it('should NOT display timeline', async () => { + expect(policyView.find('flyoutOverlay')).toHaveLength(0); + }); + + it('should show loader followed by error message', async () => { expect(policyView.find('EuiLoadingSpinner').length).toBe(1); + releaseApiFailure(); + await middlewareSpy.waitForAction('serverFailedToReturnPolicyDetailsData'); policyView.update(); const callout = policyView.find('EuiCallOut'); expect(callout).toHaveLength(1); @@ -76,14 +98,25 @@ describe('Policy Details', () => { success: true, }); } + + // Get package data + // Used in tests that route back to the list + if (apiPathMockResponseProviders[path]) { + asyncActions = asyncActions.then(async () => sleep()); + return apiPathMockResponseProviders[path](); + } } - return Promise.reject(new Error('unknown API call!')); + return Promise.reject(new Error(`unknown API call (not MOCKED): ${path}`)); }); history.push(policyDetailsPathUrl); policyView = render(); }); + it('should NOT display timeline', async () => { + expect(policyView.find('flyoutOverlay')).toHaveLength(0); + }); + it('should display back to list button and policy title', () => { policyView.update(); const pageHeaderLeft = policyView.find( diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx index acce5c8f783509..32de3c93ac98f2 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.test.tsx @@ -23,6 +23,12 @@ describe('when on the policies page', () => { render = () => mockedContext.render(); }); + it('should NOT display timeline', async () => { + const renderResult = render(); + const timelineFlyout = await renderResult.queryByTestId('flyoutOverlay'); + expect(timelineFlyout).toBeNull(); + }); + it('should show the empty state', async () => { const renderResult = render(); const table = await renderResult.findByTestId('emptyPolicyTable'); diff --git a/x-pack/plugins/security_solution/public/network/components/ip_overview/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/ip_overview/index.test.tsx index 553cb8c63db987..b8d97f06bf85f8 100644 --- a/x-pack/plugins/security_solution/public/network/components/ip_overview/index.test.tsx +++ b/x-pack/plugins/security_solution/public/network/components/ip_overview/index.test.tsx @@ -14,6 +14,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { createStore, State } from '../../../common/store'; @@ -28,10 +29,22 @@ describe('IP Overview Component', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('rendering', () => { diff --git a/x-pack/plugins/security_solution/public/network/components/kpi_network/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/kpi_network/index.test.tsx index 580a5420f1c345..8acd17d2ce7676 100644 --- a/x-pack/plugins/security_solution/public/network/components/kpi_network/index.test.tsx +++ b/x-pack/plugins/security_solution/public/network/components/kpi_network/index.test.tsx @@ -12,6 +12,7 @@ import { apolloClientObservable, mockGlobalState, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { createStore, State } from '../../../common/store'; @@ -25,10 +26,22 @@ describe('KpiNetwork Component', () => { const narrowDateRange = jest.fn(); const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('rendering', () => { diff --git a/x-pack/plugins/security_solution/public/network/components/network_dns_table/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/network_dns_table/index.test.tsx index 036ebedd6b88ef..bbbe56715d345e 100644 --- a/x-pack/plugins/security_solution/public/network/components/network_dns_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/network/components/network_dns_table/index.test.tsx @@ -15,6 +15,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { State, createStore } from '../../../common/store'; @@ -28,11 +29,23 @@ describe('NetworkTopNFlow Table Component', () => { const loadPage = jest.fn(); const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); const mount = useMountAppended(); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('rendering', () => { diff --git a/x-pack/plugins/security_solution/public/network/components/network_http_table/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/network_http_table/index.test.tsx index ac37aaf3091552..72c932c575be33 100644 --- a/x-pack/plugins/security_solution/public/network/components/network_http_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/network/components/network_http_table/index.test.tsx @@ -15,6 +15,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { useMountAppended } from '../../../common/utils/use_mount_appended'; @@ -31,11 +32,23 @@ describe('NetworkHttp Table Component', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); const mount = useMountAppended(); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('rendering', () => { diff --git a/x-pack/plugins/security_solution/public/network/components/network_top_countries_table/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/network_top_countries_table/index.test.tsx index 8b1dbc8c558b6e..a1ee0574d8b055 100644 --- a/x-pack/plugins/security_solution/public/network/components/network_top_countries_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/network/components/network_top_countries_table/index.test.tsx @@ -17,6 +17,7 @@ import { mockIndexPattern, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { useMountAppended } from '../../../common/utils/use_mount_appended'; @@ -32,10 +33,22 @@ describe('NetworkTopCountries Table Component', () => { const mount = useMountAppended(); const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('rendering', () => { diff --git a/x-pack/plugins/security_solution/public/network/components/network_top_n_flow_table/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/network_top_n_flow_table/index.test.tsx index b14d411810dee0..100ecaa51f4ae7 100644 --- a/x-pack/plugins/security_solution/public/network/components/network_top_n_flow_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/network/components/network_top_n_flow_table/index.test.tsx @@ -16,6 +16,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { useMountAppended } from '../../../common/utils/use_mount_appended'; @@ -31,11 +32,23 @@ describe('NetworkTopNFlow Table Component', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); const mount = useMountAppended(); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('rendering', () => { diff --git a/x-pack/plugins/security_solution/public/network/components/tls_table/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/tls_table/index.test.tsx index acbe974f914d7e..cd2dc926c03bcc 100644 --- a/x-pack/plugins/security_solution/public/network/components/tls_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/network/components/tls_table/index.test.tsx @@ -15,6 +15,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { useMountAppended } from '../../../common/utils/use_mount_appended'; @@ -28,11 +29,23 @@ describe('Tls Table Component', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); const mount = useMountAppended(); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('Rendering', () => { diff --git a/x-pack/plugins/security_solution/public/network/components/users_table/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/users_table/index.test.tsx index f0d4d7fbeefc60..3f1762cadd652a 100644 --- a/x-pack/plugins/security_solution/public/network/components/users_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/network/components/users_table/index.test.tsx @@ -16,6 +16,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { useMountAppended } from '../../../common/utils/use_mount_appended'; @@ -30,11 +31,23 @@ describe('Users Table Component', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); const mount = useMountAppended(); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); describe('Rendering', () => { diff --git a/x-pack/plugins/security_solution/public/network/pages/ip_details/index.test.tsx b/x-pack/plugins/security_solution/public/network/pages/ip_details/index.test.tsx index a87eb3d0574479..962a6269f84882 100644 --- a/x-pack/plugins/security_solution/public/network/pages/ip_details/index.test.tsx +++ b/x-pack/plugins/security_solution/public/network/pages/ip_details/index.test.tsx @@ -18,6 +18,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { useMountAppended } from '../../../common/utils/use_mount_appended'; @@ -90,7 +91,6 @@ const getMockProps = (ip: string) => ({ describe('Ip Details', () => { const mount = useMountAppended(); - beforeAll(() => { (useWithSource as jest.Mock).mockReturnValue({ indicesExist: false, @@ -107,15 +107,27 @@ describe('Ip Details', () => { }); afterAll(() => { - delete (global as GlobalWithFetch).fetch; + jest.resetAllMocks(); }); const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); test('it renders', () => { diff --git a/x-pack/plugins/security_solution/public/network/pages/network.test.tsx b/x-pack/plugins/security_solution/public/network/pages/network.test.tsx index 7cdfdbf0af69a6..af84e1d42b45b9 100644 --- a/x-pack/plugins/security_solution/public/network/pages/network.test.tsx +++ b/x-pack/plugins/security_solution/public/network/pages/network.test.tsx @@ -16,6 +16,7 @@ import { mockGlobalState, apolloClientObservable, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../common/mock'; import { State, createStore } from '../../common/store'; @@ -139,7 +140,13 @@ describe('rendering - rendering', () => { }); const myState: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - const myStore = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + const myStore = createStore( + myState, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); const wrapper = mount( diff --git a/x-pack/plugins/security_solution/public/overview/components/overview_host/index.test.tsx b/x-pack/plugins/security_solution/public/overview/components/overview_host/index.test.tsx index d29efa2d44c15c..2b21385004a739 100644 --- a/x-pack/plugins/security_solution/public/overview/components/overview_host/index.test.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/overview_host/index.test.tsx @@ -14,6 +14,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; @@ -95,11 +96,23 @@ describe('OverviewHost', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { const myState = cloneDeep(state); - store = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + myState, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); test('it renders the expected widget title', () => { diff --git a/x-pack/plugins/security_solution/public/overview/components/overview_network/index.test.tsx b/x-pack/plugins/security_solution/public/overview/components/overview_network/index.test.tsx index b4b685465dbda4..7a9834ee3ea9a8 100644 --- a/x-pack/plugins/security_solution/public/overview/components/overview_network/index.test.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/overview_network/index.test.tsx @@ -14,6 +14,7 @@ import { TestProviders, SUB_PLUGINS_REDUCER, createSecuritySolutionStorageMock, + kibanaObservable, } from '../../../common/mock'; import { OverviewNetwork } from '.'; @@ -86,11 +87,23 @@ describe('OverviewNetwork', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { const myState = cloneDeep(state); - store = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + myState, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); }); test('it renders the expected widget title', () => { diff --git a/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx b/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx index 9c149a850bec9d..8f2b3c7495f0d7 100644 --- a/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx @@ -24,6 +24,7 @@ import { RecentTimelines } from './recent_timelines'; import * as i18n from './translations'; import { FilterMode } from './types'; import { LoadingPlaceholders } from '../loading_placeholders'; +import { useTimelineStatus } from '../../../timelines/components/open_timeline/use_timeline_status'; import { useKibana } from '../../../common/lib/kibana'; import { SecurityPageName } from '../../../app/types'; import { APP_ID } from '../../../../common/constants'; @@ -83,25 +84,25 @@ const StatefulRecentTimelinesComponent = React.memo( ); const { fetchAllTimeline, timelines, loading } = useGetAllTimeline(); - - useEffect( - () => - fetchAllTimeline({ - pageInfo: { - pageIndex: 1, - pageSize: PAGE_SIZE, - }, - search: '', - sort: { - sortField: SortFieldTimeline.updated, - sortOrder: Direction.desc, - }, - onlyUserFavorite: filterBy === 'favorites', - timelineType: TimelineType.default, - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [filterBy] - ); + const timelineType = TimelineType.default; + const { templateTimelineType, timelineStatus } = useTimelineStatus({ timelineType }); + useEffect(() => { + fetchAllTimeline({ + pageInfo: { + pageIndex: 1, + pageSize: PAGE_SIZE, + }, + search: '', + sort: { + sortField: SortFieldTimeline.updated, + sortOrder: Direction.desc, + }, + onlyUserFavorite: filterBy === 'favorites', + status: timelineStatus, + timelineType, + templateTimelineType, + }); + }, [fetchAllTimeline, filterBy, timelineStatus, timelineType, templateTimelineType]); return ( <> diff --git a/x-pack/plugins/security_solution/public/plugin.tsx b/x-pack/plugins/security_solution/public/plugin.tsx index b247170a4a5db7..d7e29a466cbf2e 100644 --- a/x-pack/plugins/security_solution/public/plugin.tsx +++ b/x-pack/plugins/security_solution/public/plugin.tsx @@ -23,7 +23,14 @@ import { FeatureCatalogueCategory } from '../../../../src/plugins/home/public'; import { initTelemetry } from './common/lib/telemetry'; import { KibanaServices } from './common/lib/kibana/services'; import { serviceNowActionType, jiraActionType } from './common/lib/connectors'; -import { PluginSetup, PluginStart, SetupPlugins, StartPlugins, StartServices } from './types'; +import { + PluginSetup, + PluginStart, + SetupPlugins, + StartPlugins, + StartServices, + AppObservableLibs, +} from './types'; import { APP_ID, APP_ICON, @@ -120,6 +127,7 @@ export class Plugin implements IPlugin & { @@ -64,7 +68,7 @@ export const CategoriesPane = React.memo( }) => ( <> - <h5 data-test-subj="categories-pane-title">{i18n.CATEGORIES}</h5> + <H5 data-test-subj="categories-pane-title">{i18n.CATEGORIES}</H5> ` border: ${({ theme }) => theme.eui.euiBorderWidthThin} solid ${({ theme }) => theme.eui.euiColorMediumShade}; border-radius: ${({ theme }) => theme.eui.euiBorderRadius}; - left: 0; + left: 8px; padding: ${({ theme }) => theme.eui.paddingSizes.s} ${({ theme }) => theme.eui.paddingSizes.s} - ${({ theme }) => theme.eui.paddingSizes.m}; + ${({ theme }) => theme.eui.paddingSizes.s}; position: absolute; - top: calc(100% + ${({ theme }) => theme.eui.euiSize}); + top: calc(100% + 4px); width: ${({ width }) => width}px; z-index: 9990; `; diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.tsx index a3e93ff3c90eb9..a3937107936b68 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.tsx @@ -26,6 +26,7 @@ export const INPUT_TIMEOUT = 250; const FieldsBrowserButtonContainer = styled.div` position: relative; + width: 24px; `; FieldsBrowserButtonContainer.displayName = 'FieldsBrowserButtonContainer'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx index 8ad32d6e2cad01..8e34e11e85729b 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx @@ -33,6 +33,7 @@ const StatefulFlyoutHeader = React.memo( associateNote, createTimeline, description, + graphEventId, isDataInTimeline, isDatepickerLocked, isFavorite, @@ -40,6 +41,7 @@ const StatefulFlyoutHeader = React.memo( notesById, status, timelineId, + timelineType, title, toggleLock, updateDescription, @@ -58,12 +60,14 @@ const StatefulFlyoutHeader = React.memo( createTimeline={createTimeline} description={description} getNotesByIds={getNotesByIds} + graphEventId={graphEventId} isDataInTimeline={isDataInTimeline} isDatepickerLocked={isDatepickerLocked} isFavorite={isFavorite} noteIds={noteIds} status={status} timelineId={timelineId} + timelineType={timelineType} title={title} toggleLock={toggleLock} updateDescription={updateDescription} @@ -92,26 +96,30 @@ const makeMapStateToProps = () => { const { dataProviders, description = '', + graphEventId, isFavorite = false, kqlQuery, title = '', noteIds = emptyNotesId, status, + timelineType, } = timeline; const history = emptyHistory; // TODO: get history from store via selector return { description, - notesById: getNotesByIds(state), + graphEventId, history, isDataInTimeline: !isEmpty(dataProviders) || !isEmpty(get('filterQuery.kuery.expression', kqlQuery)), isFavorite, isDatepickerLocked: globalInput.linkTo.includes('timeline'), noteIds, + notesById: getNotesByIds(state), status, title, + timelineType, }; }; return mapStateToProps; diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/header_with_close_button/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/flyout/header_with_close_button/__snapshots__/index.test.tsx.snap index df96f2a1f7eba9..d0d7a1cd7f5d78 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/header_with_close_button/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/header_with_close_button/__snapshots__/index.test.tsx.snap @@ -4,6 +4,7 @@ exports[`FlyoutHeaderWithCloseButton renders correctly against snapshot 1`] = ` { }); describe('FlyoutHeaderWithCloseButton', () => { + const props = { + onClose: jest.fn(), + timelineId: 'test', + timelineType: TimelineType.default, + usersViewing: ['elastic'], + }; test('renders correctly against snapshot', () => { const EmptyComponent = shallow( - + ); expect(EmptyComponent.find('FlyoutHeaderWithCloseButton')).toMatchSnapshot(); @@ -55,13 +58,13 @@ describe('FlyoutHeaderWithCloseButton', () => { test('it should invoke onClose when the close button is clicked', () => { const closeMock = jest.fn(); + const testProps = { + ...props, + onClose: closeMock, + }; const wrapper = mount( - + ); wrapper.find('[data-test-subj="close-timeline"] button').first().simulate('click'); diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/index.test.tsx index 932cde32f3d43c..50578ef0a8e42e 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/index.test.tsx @@ -14,6 +14,7 @@ import { mockGlobalState, TestProviders, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../common/mock'; import { createStore, State } from '../../../common/store'; @@ -62,6 +63,7 @@ describe('Flyout', () => { stateShowIsTrue, SUB_PLUGINS_REDUCER, apolloClientObservable, + kibanaObservable, storage ); @@ -86,6 +88,7 @@ describe('Flyout', () => { stateWithDataProviders, SUB_PLUGINS_REDUCER, apolloClientObservable, + kibanaObservable, storage ); @@ -108,6 +111,7 @@ describe('Flyout', () => { stateWithDataProviders, SUB_PLUGINS_REDUCER, apolloClientObservable, + kibanaObservable, storage ); @@ -142,6 +146,7 @@ describe('Flyout', () => { stateWithDataProviders, SUB_PLUGINS_REDUCER, apolloClientObservable, + kibanaObservable, storage ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx new file mode 100644 index 00000000000000..fe38dd79176a5c --- /dev/null +++ b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx @@ -0,0 +1,150 @@ +/* + * 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 { + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiHorizontalRule, + EuiTitle, +} from '@elastic/eui'; +import { noop } from 'lodash/fp'; +import React, { useCallback, useState } from 'react'; +import { connect, ConnectedProps, useDispatch, useSelector } from 'react-redux'; +import styled from 'styled-components'; + +import { SecurityPageName } from '../../../app/types'; +import { AllCasesModal } from '../../../cases/components/all_cases_modal'; +import { getCaseDetailsUrl } from '../../../common/components/link_to'; +import { APP_ID } from '../../../../common/constants'; +import { useKibana } from '../../../common/lib/kibana'; +import { State } from '../../../common/store'; +import { timelineSelectors } from '../../store/timeline'; +import { timelineDefaults } from '../../store/timeline/defaults'; +import { TimelineModel } from '../../store/timeline/model'; +import { NewCase, ExistingCase } from '../timeline/properties/helpers'; +import { UNTITLED_TIMELINE } from '../timeline/properties/translations'; +import { + setInsertTimeline, + updateTimelineGraphEventId, +} from '../../../timelines/store/timeline/actions'; + +import * as i18n from './translations'; + +const OverlayContainer = styled.div<{ bodyHeight?: number }>` + height: ${({ bodyHeight }) => (bodyHeight ? `${bodyHeight}px` : 'auto')}; + width: 100%; +`; + +interface OwnProps { + bodyHeight?: number; + graphEventId?: string; + timelineId: string; +} + +const GraphOverlayComponent = ({ + bodyHeight, + graphEventId, + status, + timelineId, + title, +}: OwnProps & PropsFromRedux) => { + const dispatch = useDispatch(); + const { navigateToApp } = useKibana().services.application; + const onCloseOverlay = useCallback(() => { + dispatch(updateTimelineGraphEventId({ id: timelineId, graphEventId: '' })); + }, [dispatch, timelineId]); + const [showCaseModal, setShowCaseModal] = useState(false); + const onOpenCaseModal = useCallback(() => setShowCaseModal(true), []); + const onCloseCaseModal = useCallback(() => setShowCaseModal(false), [setShowCaseModal]); + const currentTimeline = useSelector((state: State) => + timelineSelectors.selectTimeline(state, timelineId) + ); + const onRowClick = useCallback( + (id: string) => { + onCloseCaseModal(); + + dispatch( + setInsertTimeline({ + graphEventId, + timelineId, + timelineSavedObjectId: currentTimeline.savedObjectId, + timelineTitle: title.length > 0 ? title : UNTITLED_TIMELINE, + }) + ); + + navigateToApp(`${APP_ID}:${SecurityPageName.case}`, { + path: getCaseDetailsUrl({ id }), + }); + }, + [currentTimeline, dispatch, graphEventId, navigateToApp, onCloseCaseModal, timelineId, title] + ); + + return ( + + + + + + {i18n.BACK_TO_EVENTS} + + + + + + + + + + + + + + + + + <>{`Resolver graph for event _id ${graphEventId}`} + + + + ); +}; + +const makeMapStateToProps = () => { + const getTimeline = timelineSelectors.getTimelineByIdSelector(); + const mapStateToProps = (state: State, { timelineId }: OwnProps) => { + const timeline: TimelineModel = getTimeline(state, timelineId) ?? timelineDefaults; + const { status, title = '' } = timeline; + + return { + status, + title, + }; + }; + return mapStateToProps; +}; + +const connector = connect(makeMapStateToProps); + +type PropsFromRedux = ConnectedProps; + +export const GraphOverlay = connector(GraphOverlayComponent); diff --git a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/translations.ts new file mode 100644 index 00000000000000..c7cd9253de0383 --- /dev/null +++ b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/translations.ts @@ -0,0 +1,14 @@ +/* + * 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 BACK_TO_EVENTS = i18n.translate( + 'xpack.securitySolution.timeline.graphOverlay.backToEventsButton', + { + defaultMessage: '< Back to events', + } +); diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/index.test.tsx index 1ddf298110a5de..570c0028e0f516 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/index.test.tsx @@ -8,52 +8,39 @@ import { mount, shallow } from 'enzyme'; import React from 'react'; import { AddNote } from '.'; +import { TimelineStatus } from '../../../../../common/types/timeline'; describe('AddNote', () => { const note = 'The contents of a new note'; + const props = { + associateNote: jest.fn(), + getNewNoteId: jest.fn(), + newNote: note, + onCancelAddNote: jest.fn(), + updateNewNote: jest.fn(), + updateNote: jest.fn(), + status: TimelineStatus.active, + }; test('renders correctly', () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); test('it renders the Cancel button when onCancelAddNote is provided', () => { - const wrapper = mount( - - ); + const wrapper = mount(); expect(wrapper.find('[data-test-subj="cancel"]').exists()).toEqual(true); }); test('it invokes onCancelAddNote when the Cancel button is clicked', () => { const onCancelAddNote = jest.fn(); + const testProps = { + ...props, + onCancelAddNote, + }; - const wrapper = mount( - - ); + const wrapper = mount(); wrapper.find('[data-test-subj="cancel"]').first().simulate('click'); @@ -62,17 +49,12 @@ describe('AddNote', () => { test('it does NOT invoke associateNote when the Cancel button is clicked', () => { const associateNote = jest.fn(); + const testProps = { + ...props, + associateNote, + }; - const wrapper = mount( - - ); + const wrapper = mount(); wrapper.find('[data-test-subj="cancel"]').first().simulate('click'); @@ -80,47 +62,29 @@ describe('AddNote', () => { }); test('it does NOT render the Cancel button when onCancelAddNote is NOT provided', () => { - const wrapper = mount( - - ); + const testProps = { + ...props, + onCancelAddNote: undefined, + }; + const wrapper = mount(); expect(wrapper.find('[data-test-subj="cancel"]').exists()).toEqual(false); }); test('it renders the contents of the note', () => { - const wrapper = mount( - - ); + const wrapper = mount(); expect(wrapper.find('[data-test-subj="add-a-note"]').first().text()).toEqual(note); }); test('it invokes associateNote when the Add Note button is clicked', () => { const associateNote = jest.fn(); - - const wrapper = mount( - - ); + const testProps = { + ...props, + newNote: note, + associateNote, + }; + const wrapper = mount(); wrapper.find('[data-test-subj="add-note"]').first().simulate('click'); @@ -129,17 +93,12 @@ describe('AddNote', () => { test('it invokes getNewNoteId when the Add Note button is clicked', () => { const getNewNoteId = jest.fn(); + const testProps = { + ...props, + getNewNoteId, + }; - const wrapper = mount( - - ); + const wrapper = mount(); wrapper.find('[data-test-subj="add-note"]').first().simulate('click'); @@ -148,17 +107,12 @@ describe('AddNote', () => { test('it invokes updateNewNote when the Add Note button is clicked', () => { const updateNewNote = jest.fn(); + const testProps = { + ...props, + updateNewNote, + }; - const wrapper = mount( - - ); + const wrapper = mount(); wrapper.find('[data-test-subj="add-note"]').first().simulate('click'); @@ -167,17 +121,11 @@ describe('AddNote', () => { test('it invokes updateNote when the Add Note button is clicked', () => { const updateNote = jest.fn(); - - const wrapper = mount( - - ); + const testProps = { + ...props, + updateNote, + }; + const wrapper = mount(); wrapper.find('[data-test-subj="add-note"]').first().simulate('click'); @@ -185,16 +133,11 @@ describe('AddNote', () => { }); test('it does NOT display the markdown formatting hint when a note has NOT been entered', () => { - const wrapper = mount( - - ); + const testProps = { + ...props, + newNote: '', + }; + const wrapper = mount(); expect(wrapper.find('[data-test-subj="markdown-hint"]').first()).toHaveStyleRule( 'visibility', @@ -203,16 +146,11 @@ describe('AddNote', () => { }); test('it displays the markdown formatting hint when a note has been entered', () => { - const wrapper = mount( - - ); + const testProps = { + ...props, + newNote: 'We should see a formatting hint now', + }; + const wrapper = mount(); expect(wrapper.find('[data-test-subj="markdown-hint"]').first()).toHaveStyleRule( 'visibility', diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/index.tsx index d3db1a619600f9..7c211aafdf8c63 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/notes/add_note/index.tsx @@ -61,7 +61,6 @@ export const AddNote = React.memo<{ }), [associateNote, getNewNoteId, newNote, updateNewNote, updateNote] ); - return ( diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/index.tsx index 42f28f03406798..957b37a0bd1c27 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/notes/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/notes/index.tsx @@ -21,12 +21,14 @@ import { AddNote } from './add_note'; import { columns } from './columns'; import { AssociateNote, GetNewNoteId, NotesCount, search, UpdateNote } from './helpers'; import { NOTES_PANEL_WIDTH, NOTES_PANEL_HEIGHT } from '../timeline/properties/notes_size'; +import { TimelineStatusLiteral, TimelineStatus } from '../../../../common/types/timeline'; interface Props { associateNote: AssociateNote; getNotesByIds: (noteIds: string[]) => Note[]; getNewNoteId: GetNewNoteId; noteIds: string[]; + status: TimelineStatusLiteral; updateNote: UpdateNote; } @@ -53,8 +55,9 @@ InMemoryTable.displayName = 'InMemoryTable'; /** A view for entering and reviewing notes */ export const Notes = React.memo( - ({ associateNote, getNotesByIds, getNewNoteId, noteIds, updateNote }) => { + ({ associateNote, getNotesByIds, getNewNoteId, noteIds, status, updateNote }) => { const [newNote, setNewNote] = useState(''); + const isImmutable = status === TimelineStatus.immutable; return ( @@ -63,13 +66,15 @@ export const Notes = React.memo( - + {!isImmutable && ( + + )} { const noteIds = ['abc', 'def']; @@ -38,18 +39,21 @@ describe('NoteCards', () => { }, ]; + const props = { + associateNote: jest.fn(), + getNotesByIds, + getNewNoteId: jest.fn(), + noteIds, + showAddNote: true, + status: TimelineStatus.active, + toggleShowAddNote: jest.fn(), + updateNote: jest.fn(), + }; + test('it renders the notes column when noteIds are specified', () => { const wrapper = mountWithIntl( - + ); @@ -57,17 +61,10 @@ describe('NoteCards', () => { }); test('it does NOT render the notes column when noteIds are NOT specified', () => { + const testProps = { ...props, noteIds: [] }; const wrapper = mountWithIntl( - + ); @@ -77,15 +74,7 @@ describe('NoteCards', () => { test('renders note cards', () => { const wrapper = mountWithIntl( - + ); @@ -102,15 +91,7 @@ describe('NoteCards', () => { test('it shows controls for adding notes when showAddNote is true', () => { const wrapper = mountWithIntl( - + ); @@ -118,17 +99,11 @@ describe('NoteCards', () => { }); test('it does NOT show controls for adding notes when showAddNote is false', () => { + const testProps = { ...props, showAddNote: false }; + const wrapper = mountWithIntl( - + ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.tsx index 3c8fc50e93b893..9d9055e3ad748a 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.tsx @@ -12,6 +12,7 @@ import { Note } from '../../../../common/lib/note'; import { AddNote } from '../add_note'; import { AssociateNote, GetNewNoteId, UpdateNote } from '../helpers'; import { NoteCard } from '../note_card'; +import { TimelineStatusLiteral } from '../../../../../common/types/timeline'; const AddNoteContainer = styled.div``; AddNoteContainer.displayName = 'AddNoteContainer'; @@ -49,6 +50,7 @@ interface Props { getNewNoteId: GetNewNoteId; noteIds: string[]; showAddNote: boolean; + status: TimelineStatusLiteral; toggleShowAddNote: () => void; updateNote: UpdateNote; } @@ -61,6 +63,7 @@ export const NoteCards = React.memo( getNewNoteId, noteIds, showAddNote, + status, toggleShowAddNote, updateNote, }) => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/edit_timeline_batch_actions.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/edit_timeline_batch_actions.tsx index 4d45b74e9b1b49..15c078e1753553 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/edit_timeline_batch_actions.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/edit_timeline_batch_actions.tsx @@ -6,7 +6,9 @@ import { EuiContextMenuPanel, EuiContextMenuItem, EuiBasicTable } from '@elastic/eui'; import React, { useCallback, useMemo } from 'react'; -import { isEmpty } from 'lodash/fp'; + +import { TimelineStatus } from '../../../../common/types/timeline'; + import * as i18n from './translations'; import { DeleteTimelines, OpenTimelineResult } from './types'; import { EditTimelineActions } from './export_timeline'; @@ -63,7 +65,7 @@ export const useEditTimelineBatchActions = ({ const getBatchItemsPopoverContent = useCallback( (closePopover: () => void) => { - const isDisabled = isEmpty(selectedItems); + const disabled = selectedItems?.some((item) => item.status === TimelineStatus.immutable); return ( <> , ); }, + // eslint-disable-next-line react-hooks/exhaustive-deps [ deleteTimelines, isEnableDownloader, diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/export_timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/export_timeline.test.tsx index d377b10a55c213..b8a7cfd59d2225 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/export_timeline.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/export_timeline.test.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { TimelineDownloader } from './export_timeline'; import { mockSelectedTimeline } from './mocks'; import { ReactWrapper, mount } from 'enzyme'; -import { useExportTimeline } from '.'; jest.mock('../translations', () => { return { @@ -32,19 +31,6 @@ describe('TimelineDownloader', () => { onComplete: jest.fn(), }; describe('should not render a downloader', () => { - beforeAll(() => { - ((useExportTimeline as unknown) as jest.Mock).mockReturnValue({ - enableDownloader: false, - setEnableDownloader: jest.fn(), - exportedIds: {}, - getExportedData: jest.fn(), - }); - }); - - afterAll(() => { - ((useExportTimeline as unknown) as jest.Mock).mockReset(); - }); - test('Without exportedIds', () => { const testProps = { ...defaultTestProps, @@ -65,19 +51,6 @@ describe('TimelineDownloader', () => { }); describe('should render a downloader', () => { - beforeAll(() => { - ((useExportTimeline as unknown) as jest.Mock).mockReturnValue({ - enableDownloader: false, - setEnableDownloader: jest.fn(), - exportedIds: {}, - getExportedData: jest.fn(), - }); - }); - - afterAll(() => { - ((useExportTimeline as unknown) as jest.Mock).mockReset(); - }); - test('With selectedItems and exportedIds is given and isEnableDownloader is true', () => { const testProps = { ...defaultTestProps, diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/index.test.tsx index 674cd6dad5f76f..72f149174253aa 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/index.test.tsx @@ -5,31 +5,41 @@ */ import React from 'react'; -import { mount } from 'enzyme'; -import { useExportTimeline, ExportTimeline } from '.'; +import { shallow } from 'enzyme'; +import { EditTimelineActionsComponent } from '.'; -describe('useExportTimeline', () => { - describe('call with selected timelines', () => { - let exportTimelineRes: ExportTimeline; - const TestHook = () => { - exportTimelineRes = useExportTimeline(); - return
; +describe('EditTimelineActionsComponent', () => { + describe('render', () => { + const props = { + deleteTimelines: jest.fn(), + ids: ['id1'], + isEnableDownloader: false, + isDeleteTimelineModalOpen: false, + onComplete: jest.fn(), + title: 'mockTitle', }; - beforeAll(() => { - mount(); - }); + test('should render timelineDownloader', () => { + const wrapper = shallow(); - test('Downloader should be disabled by default', () => { - expect(exportTimelineRes.isEnableDownloader).toBeFalsy(); + expect(wrapper.find('[data-test-subj="TimelineDownloader"]').exists()).toBeTruthy(); }); - test('Should include disableExportTimelineDownloader in return value', () => { - expect(exportTimelineRes).toHaveProperty('disableExportTimelineDownloader'); + test('Should render DeleteTimelineModalOverlay if deleteTimelines is given', () => { + const wrapper = shallow(); + + expect(wrapper.find('[data-test-subj="DeleteTimelineModalOverlay"]').exists()).toBeTruthy(); }); - test('Should include enableExportTimelineDownloader in return value', () => { - expect(exportTimelineRes).toHaveProperty('enableExportTimelineDownloader'); + test('Should not render DeleteTimelineModalOverlay if deleteTimelines is not given', () => { + const newProps = { + ...props, + deleteTimelines: undefined, + }; + const wrapper = shallow(); + expect( + wrapper.find('[data-test-subj="DeleteTimelineModalOverlay"]').exists() + ).not.toBeTruthy(); }); }); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/index.tsx index 7bac3229c81732..2ad4aa9d208cb6 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/export_timeline/index.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState, useCallback } from 'react'; +import React from 'react'; import { DeleteTimelines } from '../types'; import { TimelineDownloader } from './export_timeline'; @@ -17,25 +17,7 @@ export interface ExportTimeline { isEnableDownloader: boolean; } -export const useExportTimeline = (): ExportTimeline => { - const [isEnableDownloader, setIsEnableDownloader] = useState(false); - - const enableExportTimelineDownloader = useCallback(() => { - setIsEnableDownloader(true); - }, []); - - const disableExportTimelineDownloader = useCallback(() => { - setIsEnableDownloader(false); - }, []); - - return { - disableExportTimelineDownloader, - enableExportTimelineDownloader, - isEnableDownloader, - }; -}; - -const EditTimelineActionsComponent: React.FC<{ +export const EditTimelineActionsComponent: React.FC<{ deleteTimelines: DeleteTimelines | undefined; ids: string[]; isEnableDownloader: boolean; @@ -52,6 +34,7 @@ const EditTimelineActionsComponent: React.FC<{ }) => ( <> {deleteTimelines != null && ( { } }; +const setTimelineColumn = (col: ColumnHeaderResult) => { + const timelineCols: ColumnHeaderOptions = { + ...col, + columnHeaderType: defaultColumnHeaderType, + id: col.id != null ? col.id : 'unknown', + placeholder: col.placeholder != null ? col.placeholder : undefined, + category: col.category != null ? col.category : undefined, + description: col.description != null ? col.description : undefined, + example: col.example != null ? col.example : undefined, + type: col.type != null ? col.type : undefined, + aggregatable: col.aggregatable != null ? col.aggregatable : undefined, + width: col.id === '@timestamp' ? DEFAULT_DATE_COLUMN_MIN_WIDTH : DEFAULT_COLUMN_MIN_WIDTH, + }; + return timelineCols; +}; + +const setTimelineFilters = (filter: FilterTimelineResult) => ({ + $state: { + store: 'appState', + }, + meta: { + ...filter.meta, + ...(filter.meta && filter.meta.field != null ? { params: parseString(filter.meta.field) } : {}), + ...(filter.meta && filter.meta.params != null + ? { params: parseString(filter.meta.params) } + : {}), + ...(filter.meta && filter.meta.value != null ? { value: parseString(filter.meta.value) } : {}), + }, + ...(filter.exists != null ? { exists: parseString(filter.exists) } : {}), + ...(filter.match_all != null ? { exists: parseString(filter.match_all) } : {}), + ...(filter.missing != null ? { exists: parseString(filter.missing) } : {}), + ...(filter.query != null ? { query: parseString(filter.query) } : {}), + ...(filter.range != null ? { range: parseString(filter.range) } : {}), + ...(filter.script != null ? { exists: parseString(filter.script) } : {}), +}); + +const setEventIdToNoteIds = ( + duplicate: boolean, + eventIdToNoteIds: NoteResult[] | null | undefined +) => + duplicate + ? {} + : eventIdToNoteIds != null + ? eventIdToNoteIds.reduce((acc, note) => { + if (note.eventId != null) { + const eventNotes = getOr([], note.eventId, acc); + return { ...acc, [note.eventId]: [...eventNotes, note.noteId] }; + } + return acc; + }, {}) + : {}; + +const setPinnedEventsSaveObject = ( + duplicate: boolean, + pinnedEventsSaveObject: PinnedEvent[] | null | undefined +) => + duplicate + ? {} + : pinnedEventsSaveObject != null + ? pinnedEventsSaveObject.reduce( + (acc, pinnedEvent) => ({ + ...acc, + ...(pinnedEvent.eventId != null ? { [pinnedEvent.eventId]: pinnedEvent } : {}), + }), + {} + ) + : {}; + +const setPinnedEventIds = (duplicate: boolean, pinnedEventIds: string[] | null | undefined) => + duplicate + ? {} + : pinnedEventIds != null + ? pinnedEventIds.reduce((acc, pinnedEventId) => ({ ...acc, [pinnedEventId]: true }), {}) + : {}; + +// eslint-disable-next-line complexity export const defaultTimelineToTimelineModel = ( timeline: TimelineResult, duplicate: boolean ): TimelineModel => { - return Object.entries({ + const isTemplate = timeline.timelineType === TimelineType.template; + const timelineEntries = { ...timeline, - columns: - timeline.columns != null - ? timeline.columns.map((col) => { - const timelineCols: ColumnHeaderOptions = { - ...col, - columnHeaderType: defaultColumnHeaderType, - id: col.id != null ? col.id : 'unknown', - placeholder: col.placeholder != null ? col.placeholder : undefined, - category: col.category != null ? col.category : undefined, - description: col.description != null ? col.description : undefined, - example: col.example != null ? col.example : undefined, - type: col.type != null ? col.type : undefined, - aggregatable: col.aggregatable != null ? col.aggregatable : undefined, - width: - col.id === '@timestamp' ? DEFAULT_DATE_COLUMN_MIN_WIDTH : DEFAULT_COLUMN_MIN_WIDTH, - }; - return timelineCols; - }) - : defaultHeaders, - eventIdToNoteIds: duplicate - ? {} - : timeline.eventIdToNoteIds != null - ? timeline.eventIdToNoteIds.reduce((acc, note) => { - if (note.eventId != null) { - const eventNotes = getOr([], note.eventId, acc); - return { ...acc, [note.eventId]: [...eventNotes, note.noteId] }; - } - return acc; - }, {}) - : {}, - filters: - timeline.filters != null - ? timeline.filters.map((filter) => ({ - $state: { - store: 'appState', - }, - meta: { - ...filter.meta, - ...(filter.meta && filter.meta.field != null - ? { params: parseString(filter.meta.field) } - : {}), - ...(filter.meta && filter.meta.params != null - ? { params: parseString(filter.meta.params) } - : {}), - ...(filter.meta && filter.meta.value != null - ? { value: parseString(filter.meta.value) } - : {}), - }, - ...(filter.exists != null ? { exists: parseString(filter.exists) } : {}), - ...(filter.match_all != null ? { exists: parseString(filter.match_all) } : {}), - ...(filter.missing != null ? { exists: parseString(filter.missing) } : {}), - ...(filter.query != null ? { query: parseString(filter.query) } : {}), - ...(filter.range != null ? { range: parseString(filter.range) } : {}), - ...(filter.script != null ? { exists: parseString(filter.script) } : {}), - })) - : [], + columns: timeline.columns != null ? timeline.columns.map(setTimelineColumn) : defaultHeaders, + eventIdToNoteIds: setEventIdToNoteIds(duplicate, timeline.eventIdToNoteIds), + filters: timeline.filters != null ? timeline.filters.map(setTimelineFilters) : [], isFavorite: duplicate ? false : timeline.favorite != null ? timeline.favorite.length > 0 : false, noteIds: duplicate ? [] : timeline.noteIds != null ? timeline.noteIds : [], - pinnedEventIds: duplicate - ? {} - : timeline.pinnedEventIds != null - ? timeline.pinnedEventIds.reduce( - (acc, pinnedEventId) => ({ ...acc, [pinnedEventId]: true }), - {} - ) - : {}, - pinnedEventsSaveObject: duplicate - ? {} - : timeline.pinnedEventsSaveObject != null - ? timeline.pinnedEventsSaveObject.reduce( - (acc, pinnedEvent) => ({ - ...acc, - ...(pinnedEvent.eventId != null ? { [pinnedEvent.eventId]: pinnedEvent } : {}), - }), - {} - ) - : {}, + pinnedEventIds: setPinnedEventIds(duplicate, timeline.pinnedEventIds), + pinnedEventsSaveObject: setPinnedEventsSaveObject(duplicate, timeline.pinnedEventsSaveObject), id: duplicate ? '' : timeline.savedObjectId, + status: duplicate ? TimelineStatus.active : timeline.status, savedObjectId: duplicate ? null : timeline.savedObjectId, version: duplicate ? null : timeline.version, - title: duplicate ? '' : timeline.title || '', - templateTimelineId: duplicate ? null : timeline.templateTimelineId, - templateTimelineVersion: duplicate ? null : timeline.templateTimelineVersion, - }).reduce((acc: TimelineModel, [key, value]) => (value != null ? set(key, value, acc) : acc), { - ...timelineDefaults, - id: '', - }); + title: duplicate ? `${timeline.title} - Duplicate` : timeline.title || '', + templateTimelineId: duplicate && isTemplate ? uuid.v4() : timeline.templateTimelineId, + templateTimelineVersion: duplicate && isTemplate ? 1 : timeline.templateTimelineVersion, + }; + return Object.entries(timelineEntries).reduce( + (acc: TimelineModel, [key, value]) => (value != null ? set(key, value, acc) : acc), + { + ...timelineDefaults, + id: '', + } + ); }; export const formatTimelineResultToModel = ( @@ -190,6 +212,7 @@ export const formatTimelineResultToModel = ( export interface QueryTimelineById { apolloClient: ApolloClient | ApolloClient<{}> | undefined; duplicate?: boolean; + graphEventId?: string; timelineId: string; onOpenTimeline?: (timeline: TimelineModel) => void; openTimeline?: boolean; @@ -206,6 +229,7 @@ export interface QueryTimelineById { export const queryTimelineById = ({ apolloClient, duplicate = false, + graphEventId = '', timelineId, onOpenTimeline, openTimeline = true, @@ -238,6 +262,7 @@ export const queryTimelineById = ({ notes, timeline: { ...timeline, + graphEventId, show: openTimeline, }, to: getOr(to, 'dateRange.end', timeline), diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx index 24dee1460810fa..ea63f2b7b0710a 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx @@ -9,9 +9,9 @@ import React, { useEffect, useState, useCallback } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { Dispatch } from 'redux'; -import { defaultHeaders } from '../timeline/body/column_headers/default_headers'; -import { deleteTimelineMutation } from '../../containers/delete/persist.gql_query'; -import { useGetAllTimeline } from '../../containers/all'; + +import { disableTemplate } from '../../../../common/constants'; + import { DeleteTimelineMutation, SortFieldTimeline, Direction } from '../../../graphql/types'; import { State } from '../../../common/store'; import { ColumnHeaderOptions, TimelineModel } from '../../../timelines/store/timeline/model'; @@ -21,6 +21,12 @@ import { createTimeline as dispatchCreateNewTimeline, updateIsLoading as dispatchUpdateIsLoading, } from '../../../timelines/store/timeline/actions'; + +import { deleteTimelineMutation } from '../../containers/delete/persist.gql_query'; +import { useGetAllTimeline } from '../../containers/all'; + +import { defaultHeaders } from '../timeline/body/column_headers/default_headers'; + import { OpenTimeline } from './open_timeline'; import { OPEN_TIMELINE_CLASS_NAME, queryTimelineById, dispatchUpdateTimeline } from './helpers'; import { OpenTimelineModalBody } from './open_timeline_modal/open_timeline_modal_body'; @@ -42,7 +48,7 @@ import { } from './types'; import { DEFAULT_SORT_FIELD, DEFAULT_SORT_DIRECTION } from './constants'; import { useTimelineTypes } from './use_timeline_types'; -import { disableTemplate } from '../../../../common/constants'; +import { useTimelineStatus } from './use_timeline_status'; interface OwnProps { apolloClient: ApolloClient; @@ -106,28 +112,54 @@ export const StatefulOpenTimelineComponent = React.memo( /** The requested field to sort on */ const [sortField, setSortField] = useState(DEFAULT_SORT_FIELD); - const { timelineType, timelineTabs, timelineFilters } = useTimelineTypes(); - const { fetchAllTimeline, timelines, loading, totalCount } = useGetAllTimeline(); - - const refetch = useCallback( - () => - fetchAllTimeline({ - pageInfo: { - pageIndex: pageIndex + 1, - pageSize, - }, - search, - sort: { - sortField: sortField as SortFieldTimeline, - sortOrder: sortDirection as Direction, - }, - onlyUserFavorite: onlyFavorites, - timelineType, - }), - - // eslint-disable-next-line react-hooks/exhaustive-deps - [pageIndex, pageSize, search, sortField, sortDirection, timelineType, onlyFavorites] - ); + const { + customTemplateTimelineCount, + defaultTimelineCount, + elasticTemplateTimelineCount, + favoriteCount, + fetchAllTimeline, + timelines, + loading, + totalCount, + templateTimelineCount, + } = useGetAllTimeline(); + const { timelineType, timelineTabs, timelineFilters } = useTimelineTypes({ + defaultTimelineCount, + templateTimelineCount, + }); + const { timelineStatus, templateTimelineType, templateTimelineFilter } = useTimelineStatus({ + timelineType, + customTemplateTimelineCount, + elasticTemplateTimelineCount, + }); + const refetch = useCallback(() => { + fetchAllTimeline({ + pageInfo: { + pageIndex: pageIndex + 1, + pageSize, + }, + search, + sort: { + sortField: sortField as SortFieldTimeline, + sortOrder: sortDirection as Direction, + }, + onlyUserFavorite: onlyFavorites, + timelineType, + templateTimelineType, + status: timelineStatus, + }); + }, [ + fetchAllTimeline, + pageIndex, + pageSize, + search, + sortField, + sortDirection, + timelineType, + timelineStatus, + templateTimelineType, + onlyFavorites, + ]); /** Invoked when the user presses enters to submit the text in the search input */ const onQueryChange: OnQueryChange = useCallback((query: EuiSearchBarQuery) => { @@ -264,6 +296,7 @@ export const StatefulOpenTimelineComponent = React.memo( data-test-subj={'open-timeline'} deleteTimelines={onDeleteOneTimeline} defaultPageSize={defaultPageSize} + favoriteCount={favoriteCount} isLoading={loading} itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap} importDataModalToggle={importDataModalToggle} @@ -285,7 +318,9 @@ export const StatefulOpenTimelineComponent = React.memo( selectedItems={selectedItems} sortDirection={sortDirection} sortField={sortField} - tabs={!disableTemplate ? timelineTabs : undefined} + templateTimelineFilter={!disableTemplate ? templateTimelineFilter : null} + timelineType={timelineType} + timelineFilter={!disableTemplate ? timelineTabs : null} title={title} totalSearchResultsCount={totalCount} /> @@ -294,6 +329,7 @@ export const StatefulOpenTimelineComponent = React.memo( data-test-subj={'open-timeline-modal'} deleteTimelines={onDeleteOneTimeline} defaultPageSize={defaultPageSize} + favoriteCount={favoriteCount} hideActions={hideActions} isLoading={loading} itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap} @@ -312,7 +348,9 @@ export const StatefulOpenTimelineComponent = React.memo( selectedItems={selectedItems} sortDirection={sortDirection} sortField={sortField} - tabs={!disableTemplate ? timelineFilters : undefined} + templateTimelineFilter={!disableTemplate ? templateTimelineFilter : null} + timelineType={timelineType} + timelineFilter={!disableTemplate ? timelineFilters : null} title={title} totalSearchResultsCount={totalCount} /> diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx index a331c62ec47545..f42914c86f46b2 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx @@ -16,6 +16,7 @@ import { TimelinesTableProps } from './timelines_table'; import { mockTimelineResults } from '../../../common/mock/timeline_results'; import { OpenTimeline } from './open_timeline'; import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from './constants'; +import { TimelineType } from '../../../../common/types/timeline'; jest.mock('../../../common/lib/kibana'); @@ -46,8 +47,9 @@ describe('OpenTimeline', () => { selectedItems: [], sortDirection: DEFAULT_SORT_DIRECTION, sortField: DEFAULT_SORT_FIELD, - tabs:
, title, + timelineType: TimelineType.default, + templateTimelineFilter: [
], totalSearchResultsCount: mockSearchResults.length, }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.tsx index 4894b1b2577a9b..849143894efe0b 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.tsx @@ -4,17 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiPanel, EuiBasicTable } from '@elastic/eui'; +import { EuiPanel, EuiBasicTable, EuiCallOut, EuiSpacer } from '@elastic/eui'; import React, { useCallback, useMemo, useRef } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { OPEN_TIMELINE_CLASS_NAME } from './helpers'; -import { OpenTimelineProps, OpenTimelineResult, ActionTimelineToShow } from './types'; -import { SearchRow } from './search_row'; -import { TimelinesTable } from './timelines_table'; -import { ImportDataModal } from '../../../common/components/import_data_modal'; -import * as i18n from './translations'; -import { importTimelines } from '../../containers/api'; +import { ImportDataModal } from '../../../common/components/import_data_modal'; import { UtilityBarGroup, UtilityBarText, @@ -22,14 +16,23 @@ import { UtilityBarSection, UtilityBarAction, } from '../../../common/components/utility_bar'; + +import { importTimelines } from '../../containers/api'; + import { useEditTimelineBatchActions } from './edit_timeline_batch_actions'; import { useEditTimelineActions } from './edit_timeline_actions'; import { EditOneTimelineAction } from './export_timeline'; +import { SearchRow } from './search_row'; +import { TimelinesTable } from './timelines_table'; +import * as i18n from './translations'; +import { OPEN_TIMELINE_CLASS_NAME } from './helpers'; +import { OpenTimelineProps, OpenTimelineResult, ActionTimelineToShow } from './types'; export const OpenTimeline = React.memo( ({ deleteTimelines, defaultPageSize, + favoriteCount, isLoading, itemIdToExpandedNotesRowMap, importDataModalToggle, @@ -51,11 +54,12 @@ export const OpenTimeline = React.memo( sortDirection, setImportDataModalToggle, sortField, - tabs, + timelineType, + timelineFilter, + templateTimelineFilter, totalSearchResultsCount, }) => { const tableRef = useRef>(); - const { actionItem, enableExportTimelineDownloader, @@ -124,6 +128,8 @@ export const OpenTimeline = React.memo( [onDeleteSelected, deleteTimelines] ); + const SearchRowContent = useMemo(() => <>{templateTimelineFilter}, [templateTimelineFilter]); + return ( <> ( /> - {!!tabs && tabs} + + + {!!timelineFilter && timelineFilter} + > + {SearchRowContent} + @@ -206,6 +217,7 @@ export const OpenTimeline = React.memo( showExtendedColumns={true} sortDirection={sortDirection} sortField={sortField} + timelineType={timelineType} tableRef={tableRef} totalSearchResultsCount={totalSearchResultsCount} /> diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx index 42a3f9a44d4b6f..1d08f0296ce0de 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx @@ -16,6 +16,7 @@ import { TimelinesTableProps } from '../timelines_table'; import { mockTimelineResults } from '../../../../common/mock/timeline_results'; import { OpenTimelineModalBody } from './open_timeline_modal_body'; import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '../constants'; +import { TimelineType } from '../../../../../common/types/timeline'; jest.mock('../../../../common/lib/kibana'); @@ -45,7 +46,8 @@ describe('OpenTimelineModal', () => { selectedItems: [], sortDirection: DEFAULT_SORT_DIRECTION, sortField: DEFAULT_SORT_FIELD, - tabs:
, + timelineType: TimelineType.default, + templateTimelineFilter: [
], title, totalSearchResultsCount: mockSearchResults.length, }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx index 9eab64d6fcf525..bf66d9a52ff2ff 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx @@ -23,6 +23,7 @@ export const OpenTimelineModalBody = memo( ({ deleteTimelines, defaultPageSize, + favoriteCount, hideActions = [], isLoading, itemIdToExpandedNotesRowMap, @@ -42,7 +43,9 @@ export const OpenTimelineModalBody = memo( selectedItems, sortDirection, sortField, - tabs, + timelineFilter, + timelineType, + templateTimelineFilter, title, totalSearchResultsCount, }) => { @@ -54,6 +57,16 @@ export const OpenTimelineModalBody = memo( return actions.filter((action) => !hideActions.includes(action)); }, [onDeleteSelected, deleteTimelines, hideActions]); + const SearchRowContent = useMemo( + () => ( + <> + {!!timelineFilter && timelineFilter} + {!!templateTimelineFilter && templateTimelineFilter} + + ), + [timelineFilter, templateTimelineFilter] + ); + return ( <> @@ -67,13 +80,15 @@ export const OpenTimelineModalBody = memo( <> + > + {SearchRowContent} + @@ -96,6 +111,7 @@ export const OpenTimelineModalBody = memo( showExtendedColumns={false} sortDirection={sortDirection} sortField={sortField} + timelineType={timelineType} totalSearchResultsCount={totalSearchResultsCount} /> diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.tsx index 557649aa3aa43f..6f9178664ccf0a 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.tsx @@ -34,8 +34,13 @@ SearchRowFlexGroup.displayName = 'SearchRowFlexGroup'; type Props = Pick< OpenTimelineProps, - 'onlyFavorites' | 'onQueryChange' | 'onToggleOnlyFavorites' | 'query' | 'totalSearchResultsCount' -> & { tabs?: JSX.Element }; + | 'favoriteCount' + | 'onlyFavorites' + | 'onQueryChange' + | 'onToggleOnlyFavorites' + | 'query' + | 'totalSearchResultsCount' +> & { children?: JSX.Element | null }; const searchBox = { placeholder: i18n.SEARCH_PLACEHOLDER, @@ -47,12 +52,13 @@ const searchBox = { */ export const SearchRow = React.memo( ({ + favoriteCount, onlyFavorites, onQueryChange, onToggleOnlyFavorites, query, totalSearchResultsCount, - tabs, + children, }) => { return ( @@ -68,10 +74,11 @@ export const SearchRow = React.memo( data-test-subj="only-favorites-toggle" hasActiveFilters={onlyFavorites} onClick={onToggleOnlyFavorites} + numFilters={favoriteCount ?? undefined} > {i18n.ONLY_FAVORITES} - {tabs} + {!!children && children} diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/actions_columns.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/actions_columns.tsx index c92e241c0fe799..5b8eb8fd0365c4 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/actions_columns.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/actions_columns.tsx @@ -16,6 +16,7 @@ import { TimelineActionsOverflowColumns, } from '../types'; import * as i18n from '../translations'; +import { TimelineStatus } from '../../../../../common/types/timeline'; /** * Returns the action columns (e.g. delete, open duplicate timeline) @@ -54,7 +55,9 @@ export const getActionsColumns = ({ onClick: (selectedTimeline: OpenTimelineResult) => { if (enableExportTimelineDownloader != null) enableExportTimelineDownloader(selectedTimeline); }, - enabled: ({ savedObjectId }: OpenTimelineResult) => savedObjectId != null, + enabled: (timeline: OpenTimelineResult) => { + return timeline.savedObjectId != null && timeline.status !== TimelineStatus.immutable; + }, description: i18n.EXPORT_SELECTED, 'data-test-subj': 'export-timeline', }; @@ -65,7 +68,8 @@ export const getActionsColumns = ({ onClick: (selectedTimeline: OpenTimelineResult) => { if (onOpenDeleteTimelineModal != null) onOpenDeleteTimelineModal(selectedTimeline); }, - enabled: ({ savedObjectId }: OpenTimelineResult) => savedObjectId != null, + enabled: ({ savedObjectId, status }: OpenTimelineResult) => + savedObjectId != null && status !== TimelineStatus.immutable, description: i18n.DELETE_SELECTED, 'data-test-subj': 'delete-timeline', }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/icon_header_columns.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/icon_header_columns.tsx index 5b0f3ded7d71bd..e07c6b6b461491 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/icon_header_columns.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/icon_header_columns.tsx @@ -13,55 +13,68 @@ import { ACTION_COLUMN_WIDTH } from './common_styles'; import { getNotesCount, getPinnedEventCount } from '../helpers'; import * as i18n from '../translations'; import { FavoriteTimelineResult, OpenTimelineResult } from '../types'; +import { TimelineTypeLiteralWithNull, TimelineType } from '../../../../../common/types/timeline'; /** * Returns the columns that have icon headers */ -export const getIconHeaderColumns = () => [ - { - align: 'center', - field: 'pinnedEventIds', - name: ( - - - - ), - render: (_: Record | null | undefined, timelineResult: OpenTimelineResult) => ( - {`${getPinnedEventCount(timelineResult)}`} - ), - sortable: false, - width: ACTION_COLUMN_WIDTH, - }, - { - align: 'center', - field: 'eventIdToNoteIds', - name: ( - - - - ), - render: ( - _: Record | null | undefined, - timelineResult: OpenTimelineResult - ) => {getNotesCount(timelineResult)}, - sortable: false, - width: ACTION_COLUMN_WIDTH, - }, - { - align: 'center', - field: 'favorite', - name: ( - - - - ), - render: (favorite: FavoriteTimelineResult[] | null | undefined) => { - const isFavorite = favorite != null && favorite.length > 0; - const fill = isFavorite ? 'starFilled' : 'starEmpty'; +export const getIconHeaderColumns = ({ + timelineType, +}: { + timelineType: TimelineTypeLiteralWithNull; +}) => { + const columns = { + note: { + align: 'center', + field: 'eventIdToNoteIds', + name: ( + + + + ), + render: ( + _: Record | null | undefined, + timelineResult: OpenTimelineResult + ) => {getNotesCount(timelineResult)}, + sortable: false, + width: ACTION_COLUMN_WIDTH, + }, + pinnedEvent: { + align: 'center', + field: 'pinnedEventIds', + name: ( + + + + ), + render: ( + _: Record | null | undefined, + timelineResult: OpenTimelineResult + ) => ( + {`${getPinnedEventCount(timelineResult)}`} + ), + sortable: false, + width: ACTION_COLUMN_WIDTH, + }, + favorite: { + align: 'center', + field: 'favorite', + name: ( + + + + ), + render: (favorite: FavoriteTimelineResult[] | null | undefined) => { + const isFavorite = favorite != null && favorite.length > 0; + const fill = isFavorite ? 'starFilled' : 'starEmpty'; - return ; + return ; + }, + sortable: false, + width: ACTION_COLUMN_WIDTH, }, - sortable: false, - width: ACTION_COLUMN_WIDTH, - }, -]; + }; + const templateColumns = [columns.note, columns.favorite]; + const defaultColumns = [columns.pinnedEvent, columns.note, columns.favorite]; + return timelineType === TimelineType.template ? templateColumns : defaultColumns; +}; diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/index.tsx index 7091ef1f0a1f9c..fdba3247afb38f 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/index.tsx @@ -24,6 +24,7 @@ import { getActionsColumns } from './actions_columns'; import { getCommonColumns } from './common_columns'; import { getExtendedColumns } from './extended_columns'; import { getIconHeaderColumns } from './icon_header_columns'; +import { TimelineTypeLiteralWithNull } from '../../../../../common/types/timeline'; // there are a number of type mismatches across this file const EuiBasicTable: any = _EuiBasicTable; // eslint-disable-line @typescript-eslint/no-explicit-any @@ -58,6 +59,7 @@ export const getTimelinesTableColumns = ({ onOpenTimeline, onToggleShowNotes, showExtendedColumns, + timelineType, }: { actionTimelineToShow: ActionTimelineToShow[]; deleteTimelines?: DeleteTimelines; @@ -68,6 +70,7 @@ export const getTimelinesTableColumns = ({ onSelectionChange: OnSelectionChange; onToggleShowNotes: OnToggleShowNotes; showExtendedColumns: boolean; + timelineType: TimelineTypeLiteralWithNull; }) => { return [ ...getCommonColumns({ @@ -76,7 +79,7 @@ export const getTimelinesTableColumns = ({ onToggleShowNotes, }), ...getExtendedColumnsIfEnabled(showExtendedColumns), - ...getIconHeaderColumns(), + ...getIconHeaderColumns({ timelineType }), ...getActionsColumns({ actionTimelineToShow, deleteTimelines, @@ -105,6 +108,7 @@ export interface TimelinesTableProps { showExtendedColumns: boolean; sortDirection: 'asc' | 'desc'; sortField: string; + timelineType: TimelineTypeLiteralWithNull; // eslint-disable-next-line @typescript-eslint/no-explicit-any tableRef?: React.MutableRefObject<_EuiBasicTable | undefined>; totalSearchResultsCount: number; @@ -134,6 +138,7 @@ export const TimelinesTable = React.memo( sortField, sortDirection, tableRef, + timelineType, totalSearchResultsCount, }) => { const pagination = { @@ -174,6 +179,7 @@ export const TimelinesTable = React.memo( onSelectionChange, onToggleShowNotes, showExtendedColumns, + timelineType, })} compressed data-test-subj="timelines-table" diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/mocks.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/mocks.ts index 78ca898cc407e8..0770f460794a6a 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/mocks.ts +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/mocks.ts @@ -7,6 +7,7 @@ import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines_page'; import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '../constants'; import { OpenTimelineResult } from '../types'; import { TimelinesTableProps } from '.'; +import { TimelineType } from '../../../../../common/types/timeline'; export const getMockTimelinesTableProps = ( mockOpenTimelineResults: OpenTimelineResult[] @@ -28,5 +29,6 @@ export const getMockTimelinesTableProps = ( showExtendedColumns: true, sortDirection: DEFAULT_SORT_DIRECTION, sortField: DEFAULT_SORT_FIELD, + timelineType: TimelineType.default, totalSearchResultsCount: mockOpenTimelineResults.length, }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/translations.ts index edd77330f50841..7b07548af67ae3 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/translations.ts +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/translations.ts @@ -220,6 +220,20 @@ export const TAB_TEMPLATES = i18n.translate( } ); +export const FILTER_ELASTIC_TIMELINES = i18n.translate( + 'xpack.securitySolution.timelines.components.templateFilter.elasticTitle', + { + defaultMessage: 'Elastic templates', + } +); + +export const FILTER_CUSTOM_TIMELINES = i18n.translate( + 'xpack.securitySolution.timelines.components.templateFilter.customizedTitle', + { + defaultMessage: 'Custom templates', + } +); + export const IMPORT_TIMELINE_BTN_TITLE = i18n.translate( 'xpack.securitySolution.timelines.components.importTimelineModal.importTimelineTitle', { @@ -230,7 +244,7 @@ export const IMPORT_TIMELINE_BTN_TITLE = i18n.translate( export const SELECT_TIMELINE = i18n.translate( 'xpack.securitySolution.timelines.components.importTimelineModal.selectTimelineDescription', { - defaultMessage: 'Select a SIEM timeline (as exported from the Timeline view) to import', + defaultMessage: 'Select a Security timeline (as exported from the Timeline view) to import', } ); @@ -280,3 +294,10 @@ export const IMPORT_FAILED_DETAILED = (id: string, statusCode: number, message: defaultMessage: 'Timeline ID: {id}\n Status Code: {statusCode}\n Message: {message}', } ); + +export const TEMPLATE_CALL_OUT_MESSAGE = i18n.translate( + 'xpack.securitySolution.timelines.components.templateCallOutMessageTitle', + { + defaultMessage: 'Now you can add timeline templates and link it to rules.', + } +); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/types.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/types.ts index 53bf5051fb42a0..fd6a0055e66da1 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/types.ts +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/types.ts @@ -8,7 +8,12 @@ import { SetStateAction, Dispatch } from 'react'; import { AllTimelinesVariables } from '../../containers/all'; import { TimelineModel } from '../../../timelines/store/timeline/model'; import { NoteResult } from '../../../graphql/types'; -import { TimelineTypeLiteral } from '../../../../common/types/timeline'; +import { + TimelineTypeLiteral, + TimelineTypeLiteralWithNull, + TimelineStatus, + TemplateTimelineTypeLiteral, +} from '../../../../common/types/timeline'; /** The users who added a timeline to favorites */ export interface FavoriteTimelineResult { @@ -46,6 +51,7 @@ export interface OpenTimelineResult { notes?: TimelineResultNote[] | null; pinnedEventIds?: Readonly> | null; savedObjectId?: string | null; + status?: TimelineStatus | null; title?: string | null; templateTimelineId?: string | null; type?: TimelineTypeLiteral; @@ -118,6 +124,8 @@ export interface OpenTimelineProps { deleteTimelines?: DeleteTimelines; /** The default requested size of each page of search results */ defaultPageSize: number; + /** The number of favorite timeline*/ + favoriteCount?: number | null | undefined; /** Displays an indicator that data is loading when true */ isLoading: boolean; /** Required by EuiTable for expandable rows: a map of `TimelineResult.savedObjectId` to rendered notes */ @@ -160,8 +168,12 @@ export interface OpenTimelineProps { sortDirection: 'asc' | 'desc'; /** the requested field to sort on */ sortField: string; + /** this affects timeline's behaviour like editable / duplicatible */ + timelineType: TimelineTypeLiteralWithNull; + /** when timelineType === template, templatetimelineFilter is a JSX.Element */ + templateTimelineFilter: JSX.Element[] | null; /** timeline / template timeline */ - tabs?: JSX.Element; + timelineFilter?: JSX.Element | JSX.Element[] | null; /** The title of the Open Timeline component */ title: string; /** The total (server-side) count of the search results */ @@ -196,9 +208,19 @@ export enum TimelineTabsStyle { } export interface TimelineTab { - id: TimelineTypeLiteral; - name: string; + count: number | undefined; disabled: boolean; href: string; + id: TimelineTypeLiteral; + name: string; onClick: (ev: { preventDefault: () => void }) => void; + withNext: boolean; +} + +export interface TemplateTimelineFilter { + id: TemplateTimelineTypeLiteral; + name: string; + disabled: boolean; + withNext: boolean; + count: number | undefined; } diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_status.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_status.tsx new file mode 100644 index 00000000000000..f17f6aebaddf6a --- /dev/null +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_status.tsx @@ -0,0 +1,110 @@ +/* + * 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, { useState, useCallback, useMemo } from 'react'; +import { EuiFilterButton } from '@elastic/eui'; + +import { + TimelineStatus, + TimelineType, + TimelineTypeLiteralWithNull, + TemplateTimelineType, + TemplateTimelineTypeLiteralWithNull, + TimelineStatusLiteralWithNull, +} from '../../../../common/types/timeline'; + +import * as i18n from './translations'; +import { TemplateTimelineFilter } from './types'; +import { disableTemplate } from '../../../../common/constants'; + +export const useTimelineStatus = ({ + timelineType, + elasticTemplateTimelineCount, + customTemplateTimelineCount, +}: { + timelineType: TimelineTypeLiteralWithNull; + elasticTemplateTimelineCount?: number | null; + customTemplateTimelineCount?: number | null; +}): { + timelineStatus: TimelineStatusLiteralWithNull; + templateTimelineType: TemplateTimelineTypeLiteralWithNull; + templateTimelineFilter: JSX.Element[] | null; +} => { + const [selectedTab, setSelectedTab] = useState( + disableTemplate ? null : TemplateTimelineType.elastic + ); + const isTemplateFilterEnabled = useMemo(() => timelineType === TimelineType.template, [ + timelineType, + ]); + + const templateTimelineType = useMemo( + () => (disableTemplate || !isTemplateFilterEnabled ? null : selectedTab), + [selectedTab, isTemplateFilterEnabled] + ); + + const timelineStatus = useMemo( + () => + templateTimelineType == null + ? null + : templateTimelineType === TemplateTimelineType.elastic + ? TimelineStatus.immutable + : TimelineStatus.active, + [templateTimelineType] + ); + + const filters = useMemo( + () => [ + { + id: TemplateTimelineType.elastic, + name: i18n.FILTER_ELASTIC_TIMELINES, + disabled: !isTemplateFilterEnabled, + withNext: true, + count: elasticTemplateTimelineCount ?? undefined, + }, + { + id: TemplateTimelineType.custom, + name: i18n.FILTER_CUSTOM_TIMELINES, + disabled: !isTemplateFilterEnabled, + withNext: false, + count: customTemplateTimelineCount ?? undefined, + }, + ], + [customTemplateTimelineCount, elasticTemplateTimelineCount, isTemplateFilterEnabled] + ); + + const onFilterClicked = useCallback( + (tabId) => { + if (selectedTab === tabId) { + setSelectedTab(null); + } else { + setSelectedTab(tabId); + } + }, + [setSelectedTab, selectedTab] + ); + + const templateTimelineFilter = useMemo(() => { + return isTemplateFilterEnabled + ? filters.map((tab: TemplateTimelineFilter) => ( + + {tab.name} + + )) + : null; + }, [templateTimelineType, filters, isTemplateFilterEnabled, onFilterClicked]); + + return { + timelineStatus, + templateTimelineType, + templateTimelineFilter, + }; +}; diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx index 56c67b0c294a22..bee94db3488724 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx @@ -13,10 +13,16 @@ import { getTimelineTabsUrl, useFormatUrl } from '../../../common/components/lin import * as i18n from './translations'; import { TimelineTabsStyle, TimelineTab } from './types'; -export const useTimelineTypes = (): { +export const useTimelineTypes = ({ + defaultTimelineCount, + templateTimelineCount, +}: { + defaultTimelineCount?: number | null; + templateTimelineCount?: number | null; +}): { timelineType: TimelineTypeLiteralWithNull; timelineTabs: JSX.Element; - timelineFilters: JSX.Element; + timelineFilters: JSX.Element[]; } => { const history = useHistory(); const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.timelines); @@ -40,35 +46,52 @@ export const useTimelineTypes = (): { }, [history, urlSearch] ); - - const getFilterOrTabs: (timelineTabsStyle: TimelineTabsStyle) => TimelineTab[] = ( - timelineTabsStyle: TimelineTabsStyle - ) => [ - { - id: TimelineType.default, - name: - timelineTabsStyle === TimelineTabsStyle.filter - ? i18n.FILTER_TIMELINES(i18n.TAB_TIMELINES) - : i18n.TAB_TIMELINES, - href: formatUrl(getTimelineTabsUrl(TimelineType.default, urlSearch)), - disabled: false, - onClick: goToTimeline, - }, - { - id: TimelineType.template, - name: - timelineTabsStyle === TimelineTabsStyle.filter - ? i18n.FILTER_TIMELINES(i18n.TAB_TEMPLATES) - : i18n.TAB_TEMPLATES, - href: formatUrl(getTimelineTabsUrl(TimelineType.template, urlSearch)), - disabled: false, - onClick: goToTemplateTimeline, - }, - ]; + const getFilterOrTabs: (timelineTabsStyle: TimelineTabsStyle) => TimelineTab[] = useCallback( + (timelineTabsStyle: TimelineTabsStyle) => [ + { + id: TimelineType.default, + name: + timelineTabsStyle === TimelineTabsStyle.filter + ? i18n.FILTER_TIMELINES(i18n.TAB_TIMELINES) + : i18n.TAB_TIMELINES, + href: formatUrl(getTimelineTabsUrl(TimelineType.default, urlSearch)), + disabled: false, + withNext: true, + count: + timelineTabsStyle === TimelineTabsStyle.filter + ? defaultTimelineCount ?? undefined + : undefined, + onClick: goToTimeline, + }, + { + id: TimelineType.template, + name: + timelineTabsStyle === TimelineTabsStyle.filter + ? i18n.FILTER_TIMELINES(i18n.TAB_TEMPLATES) + : i18n.TAB_TEMPLATES, + href: formatUrl(getTimelineTabsUrl(TimelineType.template, urlSearch)), + disabled: false, + withNext: false, + count: + timelineTabsStyle === TimelineTabsStyle.filter + ? templateTimelineCount ?? undefined + : undefined, + onClick: goToTemplateTimeline, + }, + ], + [ + defaultTimelineCount, + templateTimelineCount, + urlSearch, + formatUrl, + goToTimeline, + goToTemplateTimeline, + ] + ); const onFilterClicked = useCallback( - (timelineTabsStyle, tabId) => { - if (timelineTabsStyle === TimelineTabsStyle.filter && tabId === timelineType) { + (tabId) => { + if (tabId === timelineType) { setTimelineTypes(null); } else { setTimelineTypes(tabId); @@ -89,7 +112,7 @@ export const useTimelineTypes = (): { href={tab.href} onClick={(ev) => { tab.onClick(ev); - onFilterClicked(TimelineTabsStyle.tab, tab.id); + onFilterClicked(tab.id); }} > {tab.name} @@ -103,24 +126,21 @@ export const useTimelineTypes = (): { }, [tabName]); const timelineFilters = useMemo(() => { - return ( - <> - {getFilterOrTabs(TimelineTabsStyle.tab).map((tab: TimelineTab) => ( - void }) => { - tab.onClick(ev); - onFilterClicked.bind(null, TimelineTabsStyle.filter, tab.id); - }} - > - {tab.name} - - ))} - - ); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [timelineType]); + return getFilterOrTabs(TimelineTabsStyle.filter).map((tab: TimelineTab) => ( + void }) => { + tab.onClick(ev); + onFilterClicked(tab.id); + }} + withNext={tab.withNext} + > + {tab.name} + + )); + }, [timelineType, getFilterOrTabs, onFilterClicked]); return { timelineType, diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap index 4e6cce618880b1..012cfd66317de7 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -1,882 +1,943 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Timeline rendering renders correctly against snapshot 1`] = ` - - - - - + + + + + + - - - - - - - + Object { + "aggregatable": true, + "category": "host", + "columnHeaderType": "not-filtered", + "description": "Name of the host. +It can contain what \`hostname\` returns on Unix systems, the fully qualified domain name, or a name specified by the user. The sender decides which value to use.", + "example": "", + "id": "host.name", + "type": "keyword", + "width": 180, + }, + Object { + "aggregatable": true, + "category": "source", + "columnHeaderType": "not-filtered", + "description": "IP address of the source. +Can be one or multiple IPv4 or IPv6 addresses.", + "example": "", + "id": "source.ip", + "type": "ip", + "width": 180, + }, + Object { + "aggregatable": true, + "category": "destination", + "columnHeaderType": "not-filtered", + "description": "IP address of the destination. +Can be one or multiple IPv4 or IPv6 addresses.", + "example": "", + "id": "destination.ip", + "type": "ip", + "width": 180, + }, + Object { + "aggregatable": true, + "category": "destination", + "columnHeaderType": "not-filtered", + "description": "Bytes sent from the source to the destination", + "example": "123", + "format": "bytes", + "id": "destination.bytes", + "type": "number", + "width": 180, + }, + Object { + "aggregatable": true, + "category": "user", + "columnHeaderType": "not-filtered", + "description": "Short name or login of the user.", + "example": "albert", + "id": "user.name", + "type": "keyword", + "width": 180, + }, + Object { + "aggregatable": true, + "category": "base", + "columnHeaderType": "not-filtered", + "description": "Each document has an _id that uniquely identifies it", + "example": "Y-6TfmcB0WOhS6qyMv3s", + "id": "_id", + "type": "keyword", + "width": 180, + }, + Object { + "aggregatable": false, + "category": "base", + "columnHeaderType": "not-filtered", + "description": "For log events the message field contains the log message. +In other use cases the message field can be used to concatenate different values which are then freely searchable. If multiple messages exist, they can be combined into one message.", + "example": "Hello World", + "id": "message", + "type": "text", + "width": 180, + }, + ] + } + dataProviders={ + Array [ + Object { + "and": Array [ + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 2", + "kqlQuery": "", + "name": "Provider 2", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 2", + }, + }, + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 3", + "kqlQuery": "", + "name": "Provider 3", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 3", + }, + }, + ], + "enabled": true, + "excluded": false, + "id": "id-Provider 1", + "kqlQuery": "", + "name": "Provider 1", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 1", + }, + }, + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 2", + "kqlQuery": "", + "name": "Provider 2", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 2", + }, + }, + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 3", + "kqlQuery": "", + "name": "Provider 3", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 3", + }, + }, + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 4", + "kqlQuery": "", + "name": "Provider 4", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 4", + }, + }, + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 5", + "kqlQuery": "", + "name": "Provider 5", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 5", + }, + }, + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 6", + "kqlQuery": "", + "name": "Provider 6", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 6", + }, + }, + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 7", + "kqlQuery": "", + "name": "Provider 7", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 7", + }, + }, + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 8", + "kqlQuery": "", + "name": "Provider 8", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 8", + }, + }, + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 9", + "kqlQuery": "", + "name": "Provider 9", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 9", + }, + }, + Object { + "and": Array [], + "enabled": true, + "excluded": false, + "id": "id-Provider 10", + "kqlQuery": "", + "name": "Provider 10", + "queryMatch": Object { + "field": "name", + "operator": ":", + "value": "Provider 10", + }, + }, + ] + } + end={1521862432253} + eventType="raw" + filters={Array []} + id="foo" + indexPattern={ + Object { + "fields": Array [ + Object { + "aggregatable": true, + "name": "@timestamp", + "searchable": true, + "type": "date", + }, + Object { + "aggregatable": true, + "name": "@version", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.ephemeral_id", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.hostname", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.id", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.test1", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.test2", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.test3", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.test4", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.test5", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.test6", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.test7", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "agent.test8", + "searchable": true, + "type": "string", + }, + Object { + "aggregatable": true, + "name": "host.name", + "searchable": true, + "type": "string", + }, + ], + "title": "filebeat-*,auditbeat-*,packetbeat-*", + } + } + indexToAdd={Array []} + isLive={false} + itemsPerPage={5} + itemsPerPageOptions={ + Array [ + 5, + 10, + 20, + ] + } + kqlMode="search" + kqlQueryExpression="" + loadingIndexName={false} + onChangeItemsPerPage={[MockFunction]} + onClose={[MockFunction]} + onDataProviderEdited={[MockFunction]} + onDataProviderRemoved={[MockFunction]} + onToggleDataProviderEnabled={[MockFunction]} + onToggleDataProviderExcluded={[MockFunction]} + show={true} + showCallOutUnauthorizedMsg={false} + sort={ + Object { + "columnId": "@timestamp", + "sortDirection": "desc", + } + } + start={1521830963132} + status="active" + toggleColumn={[MockFunction]} + usersViewing={ + Array [ + "elastic", + ] + } + /> + + + + + + `; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx index a50e7e56661f22..53b018fb00adf6 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx @@ -5,13 +5,24 @@ */ import { mount } from 'enzyme'; import React from 'react'; +import { useSelector } from 'react-redux'; -import { TestProviders } from '../../../../../common/mock'; +import { TestProviders, mockTimelineModel } from '../../../../../common/mock'; import { DEFAULT_ACTIONS_COLUMN_WIDTH } from '../constants'; import { Actions } from '.'; +jest.mock('react-redux', () => { + const origin = jest.requireActual('react-redux'); + return { + ...origin, + useSelector: jest.fn(), + }; +}); + describe('Actions', () => { + (useSelector as jest.Mock).mockReturnValue(mockTimelineModel); + test('it renders a checkbox for selecting the event when `showCheckboxes` is `true`', () => { const wrapper = mount( diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx index ef744ab562e712..d343c3db04da6e 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx @@ -3,10 +3,15 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import { EuiButtonIcon, EuiCheckbox, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui'; import React from 'react'; +import { useSelector } from 'react-redux'; +import { EuiButtonIcon, EuiCheckbox, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui'; import { Note } from '../../../../../common/lib/note'; +import { StoreState } from '../../../../../common/store/types'; + +import { TimelineModel } from '../../../../store/timeline/model'; + import { AssociateNote, UpdateNote } from '../../../notes/helpers'; import { Pin } from '../../pin'; import { NotesButton } from '../../properties/helpers'; @@ -15,6 +20,7 @@ import { eventHasNotes, getPinTooltip } from '../helpers'; import * as i18n from '../translations'; import { OnRowSelected } from '../../events'; import { Ecs } from '../../../../../graphql/types'; +import { DEFAULT_ICON_BUTTON_WIDTH } from '../../helpers'; export interface TimelineRowActionOnClick { eventId: string; @@ -27,7 +33,7 @@ export interface TimelineRowAction { displayType: 'icon' | 'contextMenu'; iconType?: string; id: string; - isActionDisabled?: boolean; + isActionDisabled?: (ecsData?: Ecs) => boolean; onClick: ({ eventId, ecsData }: TimelineRowActionOnClick) => void; content: string | JSX.Element; width?: number; @@ -78,91 +84,101 @@ export const Actions = React.memo( showNotes, toggleShowNotes, updateNote, - }) => ( - - - - {loading && } + }) => { + const timeline = useSelector((state) => { + return state.timeline.timelineById['timeline-1']; + }); + return ( + + {showCheckboxes && ( + + + {loadingEventIds.includes(eventId) ? ( + + ) : ( + ) => { + onRowSelected({ + eventIds: [eventId], + isSelected: event.currentTarget.checked, + }); + }} + /> + )} + + + )} + + + + {loading && } - {!loading && ( - - )} - - - {showCheckboxes && ( - - - {loadingEventIds.includes(eventId) ? ( - - ) : ( - ) => { - onRowSelected({ - eventIds: [eventId], - isSelected: event.currentTarget.checked, - }); - }} + onClick={onEventToggled} /> )} - )} - <>{additionalActions} + <>{additionalActions} - {!isEventViewer && ( - <> - - - - - - - + {!isEventViewer && ( + <> + + + + + + + - - - - - - - )} - - ), + + + + + + + )} + + ); + }, (nextProps, prevProps) => { return ( prevProps.actionsColumnWidth === nextProps.actionsColumnWidth && diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap index 03e4f4b5f0f2be..9508e3f18a3484 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap @@ -6,13 +6,13 @@ exports[`ColumnHeaders rendering renders correctly against snapshot 1`] = ` > + {showSelectAllCheckbox && ( + + + + + + )} + - + + {showEventsSelect && ( - + )} - {showSelectAllCheckbox && ( - - - - - - )} ( ...acc, icon: [ ...acc.icon, - + ( aria-label={action.ariaLabel} data-test-subj={`${action.dataTestSubj}-button`} iconType={action.iconType} - isDisabled={action.isActionDisabled ?? false} + isDisabled={ + action.isActionDisabled != null ? action.isActionDisabled(ecsData) : false + } onClick={() => action.onClick({ eventId: id, ecsData })} /> @@ -155,7 +158,9 @@ export const EventColumnView = React.memo( onClickCb(() => action.onClick({ eventId: id, ecsData }))} @@ -170,7 +175,11 @@ export const EventColumnView = React.memo( return grouped.contextMenu.length > 0 ? [ ...grouped.icon, - + = ({ const [expanded, setExpanded] = useState<{ [eventId: string]: boolean }>({}); const [initialRender, setInitialRender] = useState(false); const [showNotes, setShowNotes] = useState<{ [eventId: string]: boolean }>({}); - + const timeline = useSelector((state) => { + return state.timeline.timelineById['timeline-1']; + }); const divElement = useRef(null); const onToggleShowNotes = useCallback(() => { @@ -251,6 +255,7 @@ const StatefulEventComponent: React.FC = ({ getNotesByIds={getNotesByIds} noteIds={eventIdToNoteIds[event._id] || emptyNotes} showAddNote={!!showNotes[event._id]} + status={timeline.status} toggleShowAddNote={onToggleShowNotes} updateNote={updateNote} /> diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.test.ts index e237e99df9ada4..7ecd7ec5ed35c7 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.test.ts +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.test.ts @@ -7,6 +7,7 @@ import { Ecs } from '../../../../graphql/types'; import { eventHasNotes, eventIsPinned, getPinTooltip, stringifyEvent } from './helpers'; +import { TimelineType } from '../../../../../common/types/timeline'; describe('helpers', () => { describe('stringifyEvent', () => { @@ -192,21 +193,37 @@ describe('helpers', () => { describe('getPinTooltip', () => { test('it indicates the event may NOT be unpinned when `isPinned` is `true` and the event has notes', () => { - expect(getPinTooltip({ isPinned: true, eventHasNotes: true })).toEqual( - 'This event cannot be unpinned because it has notes' - ); + expect( + getPinTooltip({ isPinned: true, eventHasNotes: true, timelineType: TimelineType.default }) + ).toEqual('This event cannot be unpinned because it has notes'); }); test('it indicates the event is pinned when `isPinned` is `true` and the event does NOT have notes', () => { - expect(getPinTooltip({ isPinned: true, eventHasNotes: false })).toEqual('Pinned event'); + expect( + getPinTooltip({ isPinned: true, eventHasNotes: false, timelineType: TimelineType.default }) + ).toEqual('Pinned event'); }); test('it indicates the event is NOT pinned when `isPinned` is `false` and the event has notes', () => { - expect(getPinTooltip({ isPinned: false, eventHasNotes: true })).toEqual('Unpinned event'); + expect( + getPinTooltip({ isPinned: false, eventHasNotes: true, timelineType: TimelineType.default }) + ).toEqual('Unpinned event'); }); test('it indicates the event is NOT pinned when `isPinned` is `false` and the event does NOT have notes', () => { - expect(getPinTooltip({ isPinned: false, eventHasNotes: false })).toEqual('Unpinned event'); + expect( + getPinTooltip({ isPinned: false, eventHasNotes: false, timelineType: TimelineType.default }) + ).toEqual('Unpinned event'); + }); + + test('it indicates the event is disabled if timelineType is template', () => { + expect( + getPinTooltip({ + isPinned: false, + eventHasNotes: false, + timelineType: TimelineType.template, + }) + ).toEqual('This event cannot be pinned because it is filtered by a timeline template'); }); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts index 4c0dc28b56d3f1..52bbccbba58e70 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts @@ -3,13 +3,19 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import { isEmpty, noop } from 'lodash/fp'; +import { get, isEmpty, noop } from 'lodash/fp'; +import { Dispatch } from 'redux'; import { Ecs, TimelineItem, TimelineNonEcsData } from '../../../../graphql/types'; +import { DEFAULT_ICON_BUTTON_WIDTH } from '../helpers'; +import { updateTimelineGraphEventId } from '../../../store/timeline/actions'; import { EventType } from '../../../../timelines/store/timeline/model'; import { OnPinEvent, OnUnPinEvent } from '../events'; +import { TimelineRowAction, TimelineRowActionOnClick } from './actions'; + import * as i18n from './translations'; +import { TimelineTypeLiteral, TimelineType } from '../../../../../common/types/timeline'; // eslint-disable-next-line @typescript-eslint/no-explicit-any export const omitTypenameAndEmpty = (k: string, v: any): any | undefined => @@ -23,10 +29,19 @@ export const getPinTooltip = ({ isPinned, // eslint-disable-next-line no-shadow eventHasNotes, + timelineType, }: { isPinned: boolean; eventHasNotes: boolean; -}) => (isPinned && eventHasNotes ? i18n.PINNED_WITH_NOTES : isPinned ? i18n.PINNED : i18n.UNPINNED); + timelineType: TimelineTypeLiteral; +}) => + timelineType === TimelineType.template + ? i18n.DISABLE_PIN + : isPinned && eventHasNotes + ? i18n.PINNED_WITH_NOTES + : isPinned + ? i18n.PINNED + : i18n.UNPINNED; export interface IsPinnedParams { eventId: string; @@ -87,3 +102,32 @@ export const getEventType = (event: Ecs): Omit => { } return 'raw'; }; + +export const showGraphView = (graphEventId?: string) => + graphEventId != null && graphEventId.length > 0; + +export const isInvestigateInResolverActionEnabled = (ecsData?: Ecs) => { + return ( + get(['agent', 'type', 0], ecsData) === 'endpoint' && + get(['process', 'entity_id'], ecsData)?.length > 0 + ); +}; + +export const getInvestigateInResolverAction = ({ + dispatch, + timelineId, +}: { + dispatch: Dispatch; + timelineId: string; +}): TimelineRowAction => ({ + ariaLabel: i18n.ACTION_INVESTIGATE_IN_RESOLVER, + content: i18n.ACTION_INVESTIGATE_IN_RESOLVER, + dataTestSubj: 'investigate-in-resolver', + displayType: 'icon', + iconType: 'node', + id: 'investigateInResolver', + isActionDisabled: (ecsData?: Ecs) => !isInvestigateInResolverActionEnabled(ecsData), + onClick: ({ eventId }: TimelineRowActionOnClick) => + dispatch(updateTimelineGraphEventId({ id: timelineId, graphEventId: eventId })), + width: DEFAULT_ICON_BUTTON_WIDTH, +}); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx index 775c26e82d27bc..51bf883ed2d611 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx @@ -5,10 +5,11 @@ */ import React from 'react'; +import { useSelector } from 'react-redux'; import { mockBrowserFields } from '../../../../common/containers/source/mock'; import { Direction } from '../../../../graphql/types'; -import { defaultHeaders, mockTimelineData } from '../../../../common/mock'; +import { defaultHeaders, mockTimelineData, mockTimelineModel } from '../../../../common/mock'; import { TestProviders } from '../../../../common/mock/test_providers'; import { Body, BodyProps } from '.'; @@ -24,6 +25,13 @@ const mockSort: Sort = { sortDirection: Direction.desc, }; +jest.mock('react-redux', () => { + const origin = jest.requireActual('react-redux'); + return { + ...origin, + useSelector: jest.fn(), + }; +}); jest.mock('../../../../common/components/link_to'); jest.mock( @@ -41,40 +49,43 @@ jest.mock('../../../../common/lib/helpers/scheduler', () => ({ describe('Body', () => { const mount = useMountAppended(); + const props: BodyProps = { + addNoteToEvent: jest.fn(), + browserFields: mockBrowserFields, + columnHeaders: defaultHeaders, + columnRenderers, + data: mockTimelineData, + eventIdToNoteIds: {}, + height: testBodyHeight, + id: 'timeline-test', + isSelectAllChecked: false, + getNotesByIds: mockGetNotesByIds, + loadingEventIds: [], + onColumnRemoved: jest.fn(), + onColumnResized: jest.fn(), + onColumnSorted: jest.fn(), + onFilterChange: jest.fn(), + onPinEvent: jest.fn(), + onRowSelected: jest.fn(), + onSelectAll: jest.fn(), + onUnPinEvent: jest.fn(), + onUpdateColumns: jest.fn(), + pinnedEventIds: {}, + rowRenderers, + selectedEventIds: {}, + show: true, + sort: mockSort, + showCheckboxes: false, + toggleColumn: jest.fn(), + updateNote: jest.fn(), + }; + (useSelector as jest.Mock).mockReturnValue(mockTimelineModel); describe('rendering', () => { test('it renders the column headers', () => { const wrapper = mount( - + ); @@ -84,35 +95,7 @@ describe('Body', () => { test('it renders the scroll container', () => { const wrapper = mount( - + ); @@ -122,35 +105,7 @@ describe('Body', () => { test('it renders events', () => { const wrapper = mount( - + ); @@ -159,38 +114,10 @@ describe('Body', () => { test('it renders a tooltip for timestamp', async () => { const headersJustTimestamp = defaultHeaders.filter((h) => h.id === '@timestamp'); - + const testProps = { ...props, columnHeaders: headersJustTimestamp }; const wrapper = mount( - + ); wrapper.update(); @@ -211,6 +138,11 @@ describe('Body', () => { describe('action on event', () => { const dispatchAddNoteToEvent = jest.fn(); const dispatchOnPinEvent = jest.fn(); + const testProps = { + ...props, + addNoteToEvent: dispatchAddNoteToEvent, + onPinEvent: dispatchOnPinEvent, + }; const addaNoteToEvent = (wrapper: ReturnType, note: string) => { wrapper.find('[data-test-subj="add-note"]').first().find('button').simulate('click'); @@ -247,35 +179,7 @@ describe('Body', () => { test('Add a Note to an event', () => { const wrapper = mount( - + ); addaNoteToEvent(wrapper, 'hello world'); @@ -285,43 +189,13 @@ describe('Body', () => { }); test('Add two Note to an event', () => { - const Proxy = (props: BodyProps) => ( + const Proxy = (proxyProps: BodyProps) => ( - + ); - const wrapper = mount( - - ); + const wrapper = mount(); addaNoteToEvent(wrapper, 'hello world'); dispatchAddNoteToEvent.mockClear(); dispatchOnPinEvent.mockClear(); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx index da8835d5903e19..46895c86de084a 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx @@ -26,10 +26,13 @@ import { EventsTable, TimelineBody, TimelineBodyGlobalStyle } from '../styles'; import { ColumnHeaders } from './column_headers'; import { getActionsColumnWidth } from './column_headers/helpers'; import { Events } from './events'; +import { showGraphView } from './helpers'; import { ColumnRenderer } from './renderers/column_renderer'; import { RowRenderer } from './renderers/row_renderer'; import { Sort } from './sort'; import { useManageTimeline } from '../../manage_timeline'; +import { GraphOverlay } from '../../graph_overlay'; +import { DEFAULT_ICON_BUTTON_WIDTH } from '../helpers'; export interface BodyProps { addNoteToEvent: AddNoteToEvent; @@ -38,6 +41,7 @@ export interface BodyProps { columnRenderers: ColumnRenderer[]; data: TimelineItem[]; getNotesByIds: (noteIds: string[]) => Note[]; + graphEventId?: string; height?: number; id: string; isEventViewer?: boolean; @@ -56,6 +60,7 @@ export interface BodyProps { pinnedEventIds: Readonly>; rowRenderers: RowRenderer[]; selectedEventIds: Readonly>; + show: boolean; showCheckboxes: boolean; sort: Sort; toggleColumn: (column: ColumnHeaderOptions) => void; @@ -72,6 +77,7 @@ export const Body = React.memo( data, eventIdToNoteIds, getNotesByIds, + graphEventId, height, id, isEventViewer = false, @@ -89,6 +95,7 @@ export const Body = React.memo( pinnedEventIds, rowRenderers, selectedEventIds, + show, showCheckboxes, sort, toggleColumn, @@ -108,7 +115,7 @@ export const Body = React.memo( if (v.displayType === 'icon') { return acc + (v.width ?? 0); } - const addWidth = hasContextMenu ? 0 : 26; + const addWidth = hasContextMenu ? 0 : DEFAULT_ICON_BUTTON_WIDTH; hasContextMenu = true; return acc + addWidth; }, 0) ?? 0 @@ -127,7 +134,15 @@ export const Body = React.memo( return ( <> - + {showGraphView(graphEventId) && ( + + )} + ( selectedEventIds, setSelected, clearSelected, + show, showCheckboxes, showRowRenderers, + graphEventId, sort, toggleColumn, unPinEvent, @@ -180,6 +183,7 @@ const StatefulBodyComponent = React.memo( data={data} eventIdToNoteIds={eventIdToNoteIds} getNotesByIds={getNotesByIds} + graphEventId={graphEventId} height={height} id={id} isEventViewer={isEventViewer} @@ -197,6 +201,7 @@ const StatefulBodyComponent = React.memo( pinnedEventIds={pinnedEventIds} rowRenderers={showRowRenderers ? rowRenderers : [plainRowRenderer]} selectedEventIds={selectedEventIds} + show={id === ACTIVE_TIMELINE_REDUX_ID ? show : true} showCheckboxes={showCheckboxes} sort={sort} toggleColumn={toggleColumn} @@ -209,6 +214,7 @@ const StatefulBodyComponent = React.memo( deepEqual(prevProps.columnHeaders, nextProps.columnHeaders) && deepEqual(prevProps.data, nextProps.data) && prevProps.eventIdToNoteIds === nextProps.eventIdToNoteIds && + prevProps.graphEventId === nextProps.graphEventId && deepEqual(prevProps.notesById, nextProps.notesById) && prevProps.height === nextProps.height && prevProps.id === nextProps.id && @@ -216,6 +222,7 @@ const StatefulBodyComponent = React.memo( prevProps.isSelectAllChecked === nextProps.isSelectAllChecked && prevProps.loadingEventIds === nextProps.loadingEventIds && prevProps.pinnedEventIds === nextProps.pinnedEventIds && + prevProps.show === nextProps.show && prevProps.selectedEventIds === nextProps.selectedEventIds && prevProps.showCheckboxes === nextProps.showCheckboxes && prevProps.showRowRenderers === nextProps.showRowRenderers && @@ -238,10 +245,12 @@ const makeMapStateToProps = () => { columns, eventIdToNoteIds, eventType, + graphEventId, isSelectAllChecked, loadingEventIds, pinnedEventIds, selectedEventIds, + show, showCheckboxes, showRowRenderers, } = timeline; @@ -250,12 +259,14 @@ const makeMapStateToProps = () => { columnHeaders: memoizedColumnHeaders(columns, browserFields), eventIdToNoteIds, eventType, + graphEventId, isSelectAllChecked, loadingEventIds, notesById: getNotesByIds(state), id, pinnedEventIds, selectedEventIds, + show, showCheckboxes, showRowRenderers, }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/translations.ts index 98f544f30ae8b5..ef7ee26cd3ecf5 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/translations.ts +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/translations.ts @@ -13,6 +13,13 @@ export const NOTES_TOOLTIP = i18n.translate( } ); +export const NOTES_DISABLE_TOOLTIP = i18n.translate( + 'xpack.securitySolution.timeline.body.notes.disableEventTooltip', + { + defaultMessage: 'Add notes for event filtered by a timeline template is not allowed', + } +); + export const COPY_TO_CLIPBOARD = i18n.translate( 'xpack.securitySolution.timeline.body.copyToClipboardButtonLabel', { @@ -38,6 +45,13 @@ export const PINNED_WITH_NOTES = i18n.translate( } ); +export const DISABLE_PIN = i18n.translate( + 'xpack.securitySolution.timeline.body.pinning.disablePinnnedTooltip', + { + defaultMessage: 'This event cannot be pinned because it is filtered by a timeline template', + } +); + export const EXPAND = i18n.translate( 'xpack.securitySolution.timeline.body.actions.expandAriaLabel', { @@ -51,3 +65,10 @@ export const COLLAPSE = i18n.translate( defaultMessage: 'Collapse', } ); + +export const ACTION_INVESTIGATE_IN_RESOLVER = i18n.translate( + 'xpack.securitySolution.timeline.body.actions.investigateInResolverTooltip', + { + defaultMessage: 'Investigate in Resolver', + } +); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.test.tsx index 6fb2443486f811..922148535d1265 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.test.tsx @@ -15,6 +15,7 @@ import { mockDataProviders } from '../data_providers/mock/mock_data_providers'; import { useMountAppended } from '../../../../common/utils/use_mount_appended'; import { TimelineHeader } from '.'; +import { TimelineStatus } from '../../../../../common/types/timeline'; const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings; @@ -23,43 +24,32 @@ jest.mock('../../../../common/lib/kibana'); describe('Header', () => { const indexPattern = mockIndexPattern; const mount = useMountAppended(); + const props = { + browserFields: {}, + dataProviders: mockDataProviders, + filterManager: new FilterManager(mockUiSettingsForFilterManager), + id: 'foo', + indexPattern, + onDataProviderEdited: jest.fn(), + onDataProviderRemoved: jest.fn(), + onToggleDataProviderEnabled: jest.fn(), + onToggleDataProviderExcluded: jest.fn(), + show: true, + showCallOutUnauthorizedMsg: false, + status: TimelineStatus.active, + }; describe('rendering', () => { test('renders correctly against snapshot', () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); test('it renders the data providers when show is true', () => { + const testProps = { ...props, show: true }; const wrapper = mount( - + ); @@ -67,21 +57,11 @@ describe('Header', () => { }); test('it does NOT render the data providers when show is false', () => { + const testProps = { ...props, show: false }; + const wrapper = mount( - + ); @@ -89,21 +69,15 @@ describe('Header', () => { }); test('it renders the unauthorized call out providers', () => { + const testProps = { + ...props, + filterManager: new FilterManager(mockUiSettingsForFilterManager), + showCallOutUnauthorizedMsg: true, + }; + const wrapper = mount( - + ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx index fb47eb331fdbbf..0541dee4b1e52e 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { FilterManager, IIndexPattern } from 'src/plugins/data/public'; import deepEqual from 'fast-deep-equal'; +import { showGraphView } from '../body/helpers'; import { DataProviders } from '../data_providers'; import { DataProvider } from '../data_providers/data_provider'; import { @@ -21,11 +22,16 @@ import { StatefulSearchOrFilter } from '../search_or_filter'; import { BrowserFields } from '../../../../common/containers/source'; import * as i18n from './translations'; +import { + TimelineStatus, + TimelineStatusLiteralWithNull, +} from '../../../../../common/types/timeline'; interface Props { browserFields: BrowserFields; dataProviders: DataProvider[]; filterManager: FilterManager; + graphEventId?: string; id: string; indexPattern: IIndexPattern; onDataProviderEdited: OnDataProviderEdited; @@ -34,6 +40,7 @@ interface Props { onToggleDataProviderExcluded: OnToggleDataProviderExcluded; show: boolean; showCallOutUnauthorizedMsg: boolean; + status: TimelineStatusLiteralWithNull; } const TimelineHeaderComponent: React.FC = ({ @@ -42,12 +49,14 @@ const TimelineHeaderComponent: React.FC = ({ indexPattern, dataProviders, filterManager, + graphEventId, onDataProviderEdited, onDataProviderRemoved, onToggleDataProviderEnabled, onToggleDataProviderExcluded, show, showCallOutUnauthorizedMsg, + status, }) => ( <> {showCallOutUnauthorizedMsg && ( @@ -59,24 +68,35 @@ const TimelineHeaderComponent: React.FC = ({ size="s" /> )} - {show && ( - )} + {show && !showGraphView(graphEventId) && ( + <> + - + + + )} ); @@ -88,10 +108,12 @@ export const TimelineHeader = React.memo( deepEqual(prevProps.indexPattern, nextProps.indexPattern) && deepEqual(prevProps.dataProviders, nextProps.dataProviders) && prevProps.filterManager === nextProps.filterManager && + prevProps.graphEventId === nextProps.graphEventId && prevProps.onDataProviderEdited === nextProps.onDataProviderEdited && prevProps.onDataProviderRemoved === nextProps.onDataProviderRemoved && prevProps.onToggleDataProviderEnabled === nextProps.onToggleDataProviderEnabled && prevProps.onToggleDataProviderExcluded === nextProps.onToggleDataProviderExcluded && prevProps.show === nextProps.show && - prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg + prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg && + prevProps.status === nextProps.status ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/translations.ts index 7c28f88a571d50..dd945d345aad87 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/translations.ts +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/translations.ts @@ -10,6 +10,14 @@ export const CALL_OUT_UNAUTHORIZED_MSG = i18n.translate( 'xpack.securitySolution.timeline.callOut.unauthorized.message.description', { defaultMessage: - 'You require permission to auto-save timelines within the SIEM application, though you may continue to use the timeline to search and filter security events', + 'You can use Timeline to investigate events, but you do not have the required permissions to save timelines for future use. If you need to save timelines, contact your Kibana administrator.', + } +); + +export const CALL_OUT_IMMUTIABLE = i18n.translate( + 'xpack.securitySolution.timeline.callOut.immutable.message.description', + { + defaultMessage: + 'This timeline is immutable, therefore not allowed to save it within the security application, though you may continue to use the timeline to search and filter security events', } ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/helpers.tsx index b5481e9d4eee24..a3fc692c3a8a85 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/helpers.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/helpers.tsx @@ -153,3 +153,5 @@ export const combineQueries = ({ * the `Timeline` and the `Events Viewer` widget */ export const STATEFUL_EVENT_CSS_CLASS_NAME = 'event-column-view'; + +export const DEFAULT_ICON_BUTTON_WIDTH = 24; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx index 5ccc8911d1974b..296b24cff43adb 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.test.tsx @@ -25,6 +25,7 @@ import { Sort } from './body/sort'; import { mockDataProviders } from './data_providers/mock/mock_data_providers'; import { StatefulTimeline, Props as StatefulTimelineProps } from './index'; import { Timeline } from './timeline'; +import { TimelineType, TimelineStatus } from '../../../../common/types/timeline'; jest.mock('../../../common/lib/kibana', () => { const originalModule = jest.requireActual('../../../common/lib/kibana'); @@ -72,6 +73,7 @@ describe('StatefulTimeline', () => { eventType: 'raw', end: endDate, filters: [], + graphEventId: undefined, id: 'foo', isLive: false, isTimelineExists: false, @@ -87,6 +89,8 @@ describe('StatefulTimeline', () => { showCallOutUnauthorizedMsg: false, sort, start: startDate, + status: TimelineStatus.active, + timelineType: TimelineType.default, updateColumns: timelineActions.updateColumns, updateDataProviderEnabled: timelineActions.updateDataProviderEnabled, updateDataProviderExcluded: timelineActions.updateDataProviderExcluded, diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx index df76eb350ace7f..35622eddc359c0 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx @@ -41,6 +41,7 @@ const StatefulTimelineComponent = React.memo( eventType, end, filters, + graphEventId, id, isLive, isTimelineExists, @@ -56,6 +57,8 @@ const StatefulTimelineComponent = React.memo( showCallOutUnauthorizedMsg, sort, start, + status, + timelineType, updateDataProviderEnabled, updateDataProviderExcluded, updateItemsPerPage, @@ -168,6 +171,7 @@ const StatefulTimelineComponent = React.memo( end={end} eventType={eventType} filters={filters} + graphEventId={graphEventId} id={id} indexPattern={indexPattern} indexToAdd={indexToAdd} @@ -187,6 +191,7 @@ const StatefulTimelineComponent = React.memo( showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg} sort={sort!} start={start} + status={status} toggleColumn={toggleColumn} usersViewing={usersViewing} /> @@ -196,6 +201,7 @@ const StatefulTimelineComponent = React.memo( return ( prevProps.eventType === nextProps.eventType && prevProps.end === nextProps.end && + prevProps.graphEventId === nextProps.graphEventId && prevProps.id === nextProps.id && prevProps.isLive === nextProps.isLive && prevProps.itemsPerPage === nextProps.itemsPerPage && @@ -204,6 +210,8 @@ const StatefulTimelineComponent = React.memo( prevProps.show === nextProps.show && prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg && prevProps.start === nextProps.start && + prevProps.timelineType === nextProps.timelineType && + prevProps.status === nextProps.status && deepEqual(prevProps.columns, nextProps.columns) && deepEqual(prevProps.dataProviders, nextProps.dataProviders) && deepEqual(prevProps.filters, nextProps.filters) && @@ -229,22 +237,25 @@ const makeMapStateToProps = () => { dataProviders, eventType, filters, + graphEventId, itemsPerPage, itemsPerPageOptions, kqlMode, show, sort, + status, + timelineType, } = timeline; const kqlQueryExpression = getKqlQueryTimeline(state, id)!; const timelineFilter = kqlMode === 'filter' ? filters || [] : []; - return { columns, dataProviders, eventType, end: input.timerange.to, filters: timelineFilter, + graphEventId, id, isLive: input.policy.kind === 'interval', isTimelineExists: getTimeline(state, id) != null, @@ -256,6 +267,8 @@ const makeMapStateToProps = () => { showCallOutUnauthorizedMsg: getShowCallOutUnauthorizedMsg(state), sort, start: input.timerange.from, + status, + timelineType, }; }; return mapStateToProps; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx index 2ffbae1f7eb5c0..5e6f35e8397e48 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx @@ -50,7 +50,11 @@ describe('Insert timeline popover ', () => { payload: { id: 'timeline-id', show: false }, type: 'x-pack/security_solution/local/timeline/SHOW_TIMELINE', }); - expect(onTimelineChange).toBeCalledWith('Timeline title', '34578-3497-5893-47589-34759'); + expect(onTimelineChange).toBeCalledWith( + 'Timeline title', + '34578-3497-5893-47589-34759', + undefined + ); expect(mockDispatch.mock.calls[1][0]).toEqual({ payload: null, type: 'x-pack/security_solution/local/timeline/SET_INSERT_TIMELINE', diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx index de199d9a1cc2eb..83417cdb51b699 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx @@ -19,7 +19,11 @@ import { setInsertTimeline } from '../../../store/timeline/actions'; interface InsertTimelinePopoverProps { isDisabled: boolean; hideUntitled?: boolean; - onTimelineChange: (timelineTitle: string, timelineId: string | null) => void; + onTimelineChange: ( + timelineTitle: string, + timelineId: string | null, + graphEventId?: string + ) => void; } type Props = InsertTimelinePopoverProps; @@ -38,7 +42,11 @@ export const InsertTimelinePopoverComponent: React.FC = ({ useEffect(() => { if (insertTimeline != null) { dispatch(timelineActions.showTimeline({ id: insertTimeline.timelineId, show: false })); - onTimelineChange(insertTimeline.timelineTitle, insertTimeline.timelineSavedObjectId); + onTimelineChange( + insertTimeline.timelineTitle, + insertTimeline.timelineSavedObjectId, + insertTimeline.graphEventId + ); dispatch(setInsertTimeline(null)); } // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx index c3def9c4cbb292..c3bcd1c0ebe516 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ +import { isEmpty } from 'lodash/fp'; import { useCallback, useState } from 'react'; import { useBasePath } from '../../../../common/lib/kibana'; import { CursorPosition } from '../../../../common/components/markdown_editor'; @@ -16,8 +17,10 @@ export const useInsertTimeline = (form: FormHook, fieldNa end: 0, }); const handleOnTimelineChange = useCallback( - (title: string, id: string | null) => { - const builtLink = `${basePath}/app/security/timelines?timeline=(id:'${id}',isOpen:!t)`; + (title: string, id: string | null, graphEventId?: string) => { + const builtLink = `${basePath}/app/security/timelines?timeline=(id:'${id}'${ + !isEmpty(graphEventId) ? `,graphEventId:'${graphEventId}'` : '' + },isOpen:!t)`; const currentValue = form.getFormData()[fieldName]; const newValue: string = [ currentValue.slice(0, cursorPosition.start), @@ -28,16 +31,12 @@ export const useInsertTimeline = (form: FormHook, fieldNa ].join(''); form.setFieldValue(fieldName, newValue); }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [form] - ); - const handleCursorChange = useCallback( - (cp: CursorPosition) => { - setCursorPosition(cp); - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [cursorPosition] + [basePath, cursorPosition, fieldName, form] ); + const handleCursorChange = useCallback((cp: CursorPosition) => { + setCursorPosition(cp); + }, []); + return { cursorPosition, handleCursorChange, diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.tsx index 800ea814fdd509..30fe8ae0ca1f66 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.tsx @@ -8,6 +8,8 @@ import { EuiButtonIcon, IconSize } from '@elastic/eui'; import { noop } from 'lodash/fp'; import React from 'react'; +import { TimelineType, TimelineTypeLiteral } from '../../../../../common/types/timeline'; + import * as i18n from '../body/translations'; export type PinIcon = 'pin' | 'pinFilled'; @@ -17,21 +19,25 @@ export const getPinIcon = (pinned: boolean): PinIcon => (pinned ? 'pinFilled' : interface Props { allowUnpinning: boolean; iconSize?: IconSize; + timelineType?: TimelineTypeLiteral; onClick?: () => void; pinned: boolean; } export const Pin = React.memo( - ({ allowUnpinning, iconSize = 'm', onClick = noop, pinned }) => ( - - ) + ({ allowUnpinning, iconSize = 'm', onClick = noop, pinned, timelineType }) => { + const isTemplate = timelineType === TimelineType.template; + return ( + + ); + } ); Pin.displayName = 'Pin'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.test.tsx index d8c9d2ed02cc6e..aec09a95b4b195 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.test.tsx @@ -17,6 +17,7 @@ jest.mock('../../../../common/lib/kibana', () => { useKibana: jest.fn().mockReturnValue({ services: { application: { + navigateToApp: jest.fn(), capabilities: { siem: { crud: true, diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx index f2e7d26c9e8516..21140d668d7167 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx @@ -20,7 +20,6 @@ import { import React, { useCallback } from 'react'; import uuid from 'uuid'; import styled from 'styled-components'; -import { useHistory } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { APP_ID } from '../../../../../common/constants'; @@ -28,11 +27,11 @@ import { TimelineTypeLiteral, TimelineStatus, TimelineType, + TimelineStatusLiteral, + TimelineId, } from '../../../../../common/types/timeline'; -import { navTabs } from '../../../../app/home/home_navigations'; import { SecurityPageName } from '../../../../app/types'; import { timelineSelectors } from '../../../../timelines/store/timeline'; -import { useGetUrlSearch } from '../../../../common/components/navigation/use_get_url_search'; import { getCreateCaseUrl } from '../../../../common/components/link_to'; import { State } from '../../../../common/store'; import { useKibana } from '../../../../common/lib/kibana'; @@ -44,7 +43,7 @@ import { AssociateNote, UpdateNote } from '../../notes/helpers'; import { NOTES_PANEL_WIDTH } from './notes_size'; import { ButtonContainer, DescriptionContainer, LabelText, NameField, StyledStar } from './styles'; import * as i18n from './translations'; -import { setInsertTimeline } from '../../../store/timeline/actions'; +import { setInsertTimeline, showTimeline } from '../../../store/timeline/actions'; import { useCreateTimelineButton } from './use_create_timeline'; export const historyToolTip = 'The chronological history of actions related to this timeline'; @@ -139,6 +138,8 @@ export const Name = React.memo(({ timelineId, title, updateTitle }) = Name.displayName = 'Name'; interface NewCaseProps { + compact?: boolean; + graphEventId?: string; onClosePopover: () => void; timelineId: string; timelineStatus: TimelineStatus; @@ -146,44 +147,50 @@ interface NewCaseProps { } export const NewCase = React.memo( - ({ onClosePopover, timelineId, timelineStatus, timelineTitle }) => { - const history = useHistory(); - const urlSearch = useGetUrlSearch(navTabs.case); + ({ compact, graphEventId, onClosePopover, timelineId, timelineStatus, timelineTitle }) => { const dispatch = useDispatch(); const { savedObjectId } = useSelector((state: State) => timelineSelectors.selectTimeline(state, timelineId) ); const { navigateToApp } = useKibana().services.application; + const buttonText = compact ? i18n.ATTACH_TO_NEW_CASE : i18n.ATTACH_TIMELINE_TO_NEW_CASE; const handleClick = useCallback(() => { onClosePopover(); dispatch( setInsertTimeline({ + graphEventId, timelineId, timelineSavedObjectId: savedObjectId, timelineTitle: timelineTitle.length > 0 ? timelineTitle : i18n.UNTITLED_TIMELINE, }) ); + dispatch(showTimeline({ id: TimelineId.active, show: false })); + navigateToApp(`${APP_ID}:${SecurityPageName.case}`, { - path: getCreateCaseUrl(urlSearch), - }); - history.push({ - pathname: `/${SecurityPageName.case}/create`, + path: getCreateCaseUrl(), }); - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [dispatch, navigateToApp, onClosePopover, history, timelineId, timelineTitle, urlSearch]); + }, [ + dispatch, + graphEventId, + navigateToApp, + onClosePopover, + savedObjectId, + timelineId, + timelineTitle, + ]); return ( - {i18n.ATTACH_TIMELINE_TO_NEW_CASE} + {buttonText} ); } @@ -191,28 +198,33 @@ export const NewCase = React.memo( NewCase.displayName = 'NewCase'; interface ExistingCaseProps { + compact?: boolean; onClosePopover: () => void; onOpenCaseModal: () => void; timelineStatus: TimelineStatus; } export const ExistingCase = React.memo( - ({ onClosePopover, onOpenCaseModal, timelineStatus }) => { + ({ compact, onClosePopover, onOpenCaseModal, timelineStatus }) => { const handleClick = useCallback(() => { onClosePopover(); onOpenCaseModal(); }, [onOpenCaseModal, onClosePopover]); + const buttonText = compact + ? i18n.ATTACH_TO_EXISTING_CASE + : i18n.ATTACH_TIMELINE_TO_EXISTING_CASE; return ( <> - {i18n.ATTACH_TIMELINE_TO_EXISTING_CASE} + {buttonText} ); @@ -251,11 +263,13 @@ interface NotesButtonProps { getNotesByIds: (noteIds: string[]) => Note[]; noteIds: string[]; size: 's' | 'l'; + status: TimelineStatusLiteral; showNotes: boolean; toggleShowNotes: () => void; text?: string; toolTip?: string; updateNote: UpdateNote; + timelineType: TimelineTypeLiteral; } const getNewNoteId = (): string => uuid.v4(); @@ -292,16 +306,24 @@ LargeNotesButton.displayName = 'LargeNotesButton'; interface SmallNotesButtonProps { noteIds: string[]; toggleShowNotes: () => void; + timelineType: TimelineTypeLiteral; } -const SmallNotesButton = React.memo(({ noteIds, toggleShowNotes }) => ( - toggleShowNotes()} - /> -)); +const SmallNotesButton = React.memo( + ({ noteIds, toggleShowNotes, timelineType }) => { + const isTemplate = timelineType === TimelineType.template; + + return ( + toggleShowNotes()} + isDisabled={isTemplate} + /> + ); + } +); SmallNotesButton.displayName = 'SmallNotesButton'; /** @@ -315,25 +337,32 @@ const NotesButtonComponent = React.memo( noteIds, showNotes, size, + status, toggleShowNotes, text, updateNote, + timelineType, }) => ( <> {size === 'l' ? ( ) : ( - + )} {size === 'l' && showNotes ? ( @@ -353,6 +382,8 @@ export const NotesButton = React.memo( noteIds, showNotes, size, + status, + timelineType, toggleShowNotes, toolTip, text, @@ -366,9 +397,11 @@ export const NotesButton = React.memo( noteIds={noteIds} showNotes={showNotes} size={size} + status={status} toggleShowNotes={toggleShowNotes} text={text} updateNote={updateNote} + timelineType={timelineType} /> ) : ( @@ -379,9 +412,11 @@ export const NotesButton = React.memo( noteIds={noteIds} showNotes={showNotes} size={size} + status={status} toggleShowNotes={toggleShowNotes} text={text} updateNote={updateNote} + timelineType={timelineType} /> ) diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx index 3078700a29d76b..cd089d10d5d4cb 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx @@ -6,18 +6,18 @@ import { mount } from 'enzyme'; import React from 'react'; -import { TimelineStatus } from '../../../../../common/types/timeline'; +import { TimelineStatus, TimelineType } from '../../../../../common/types/timeline'; import { mockGlobalState, apolloClientObservable, SUB_PLUGINS_REDUCER, createSecuritySolutionStorageMock, TestProviders, + kibanaObservable, } from '../../../../common/mock'; import { createStore, State } from '../../../../common/store'; import { useThrottledResizeObserver } from '../../../../common/components/utils'; import { Properties, showDescriptionThreshold, showNotesThreshold } from '.'; -import { SecurityPageName } from '../../../../app/types'; import { setInsertTimeline } from '../../../store/timeline/actions'; export { nextTick } from '../../../../../../../test_utils'; @@ -25,12 +25,13 @@ import { act } from 'react-dom/test-utils'; jest.mock('../../../../common/components/link_to'); +const mockNavigateToApp = jest.fn(); jest.mock('../../../../common/lib/kibana', () => { const original = jest.requireActual('../../../../common/lib/kibana'); return { ...original, - useKibana: jest.fn().mockReturnValue({ + useKibana: () => ({ services: { application: { capabilities: { @@ -38,7 +39,7 @@ jest.mock('../../../../common/lib/kibana', () => { crud: true, }, }, - navigateToApp: jest.fn(), + navigateToApp: mockNavigateToApp, }, }, }), @@ -63,7 +64,6 @@ jest.mock('react-redux', () => { useSelector: jest.fn().mockReturnValue({ savedObjectId: '1', urlState: {} }), }; }); -const mockHistoryPush = jest.fn(); jest.mock('react-router-dom', () => { const original = jest.requireActual('react-router-dom'); @@ -71,7 +71,7 @@ jest.mock('react-router-dom', () => { return { ...original, useHistory: () => ({ - push: mockHistoryPush, + push: jest.fn(), }), }; }); @@ -87,6 +87,7 @@ const defaultProps = { isDatepickerLocked: false, isFavorite: false, title: '', + timelineType: TimelineType.default, description: '', getNotesByIds: jest.fn(), noteIds: [], @@ -104,11 +105,23 @@ describe('Properties', () => { const { storage } = createSecuritySolutionStorageMock(); let mockedWidth = 1000; - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); beforeEach(() => { jest.clearAllMocks(); - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); (useThrottledResizeObserver as jest.Mock).mockReturnValue({ width: mockedWidth }); }); @@ -131,9 +144,10 @@ describe('Properties', () => { }); test('renders correctly draft timeline', () => { + const testProps = { ...defaultProps, status: TimelineStatus.draft }; const wrapper = mount( - + ); @@ -158,9 +172,11 @@ describe('Properties', () => { }); test('it renders a filled star icon when it is a favorite', () => { + const testProps = { ...defaultProps, isFavorite: true }; + const wrapper = mount( - + ); @@ -169,10 +185,10 @@ describe('Properties', () => { test('it renders the title of the timeline', () => { const title = 'foozle'; - + const testProps = { ...defaultProps, title }; const wrapper = mount( - + ); @@ -195,9 +211,11 @@ describe('Properties', () => { }); test('it renders the lock icon when isDatepickerLocked is true', () => { + const testProps = { ...defaultProps, isDatepickerLocked: true }; + const wrapper = mount( - + ); expect( @@ -224,13 +242,16 @@ describe('Properties', () => { test('it renders a description on the left when the width is at least as wide as the threshold', () => { const description = 'strange'; + const testProps = { ...defaultProps, description }; + + // mockedWidth = showDescriptionThreshold; (useThrottledResizeObserver as jest.Mock).mockReset(); (useThrottledResizeObserver as jest.Mock).mockReturnValue({ width: showDescriptionThreshold }); const wrapper = mount( - + ); @@ -245,6 +266,9 @@ describe('Properties', () => { test('it does NOT render a description on the left when the width is less than the threshold', () => { const description = 'strange'; + const testProps = { ...defaultProps, description }; + + // mockedWidth = showDescriptionThreshold - 1; (useThrottledResizeObserver as jest.Mock).mockReset(); (useThrottledResizeObserver as jest.Mock).mockReturnValue({ @@ -253,7 +277,7 @@ describe('Properties', () => { const wrapper = mount( - + ); @@ -314,10 +338,11 @@ describe('Properties', () => { test('it renders an avatar for the current user viewing the timeline when it has a title', () => { const title = 'port scan'; + const testProps = { ...defaultProps, title }; const wrapper = mount( - + ); @@ -335,15 +360,16 @@ describe('Properties', () => { }); test('insert timeline - new case', async () => { + const testProps = { ...defaultProps, title: 'coolness' }; + const wrapper = mount( - + ); wrapper.find('[data-test-subj="settings-gear"]').at(0).simulate('click'); wrapper.find('[data-test-subj="attach-timeline-case"]').first().simulate('click'); - - expect(mockHistoryPush).toBeCalledWith({ pathname: `/${SecurityPageName.case}/create` }); + expect(mockNavigateToApp).toBeCalledWith('securitySolution:case', { path: '/create' }); expect(mockDispatch).toBeCalledWith( setInsertTimeline({ timelineId: defaultProps.timelineId, @@ -354,9 +380,11 @@ describe('Properties', () => { }); test('insert timeline - existing case', async () => { + const testProps = { ...defaultProps, title: 'coolness' }; + const wrapper = mount( - + ); wrapper.find('[data-test-subj="settings-gear"]').at(0).simulate('click'); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.tsx index 602a7c8191c7a2..40462fa0d09da5 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.tsx @@ -7,7 +7,7 @@ import React, { useState, useCallback, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { TimelineStatus, TimelineTypeLiteral } from '../../../../../common/types/timeline'; +import { TimelineStatusLiteral, TimelineTypeLiteral } from '../../../../../common/types/timeline'; import { useThrottledResizeObserver } from '../../../../common/components/utils'; import { Note } from '../../../../common/lib/note'; import { InputsModelId } from '../../../../common/store/inputs/constants'; @@ -46,12 +46,14 @@ interface Props { createTimeline: CreateTimeline; description: string; getNotesByIds: (noteIds: string[]) => Note[]; + graphEventId?: string; isDataInTimeline: boolean; isDatepickerLocked: boolean; isFavorite: boolean; noteIds: string[]; timelineId: string; - status: TimelineStatus; + timelineType: TimelineTypeLiteral; + status: TimelineStatusLiteral; title: string; toggleLock: ToggleLock; updateDescription: UpdateDescription; @@ -79,12 +81,14 @@ export const Properties = React.memo( createTimeline, description, getNotesByIds, + graphEventId, isDataInTimeline, isDatepickerLocked, isFavorite, noteIds, status, timelineId, + timelineType, title, toggleLock, updateDescription, @@ -120,18 +124,21 @@ export const Properties = React.memo( const onRowClick = useCallback( (id: string) => { onCloseCaseModal(); - navigateToApp(`${APP_ID}:${SecurityPageName.case}`, { - path: getCaseDetailsUrl({ id }), - }); + dispatch( setInsertTimeline({ + graphEventId, timelineId, timelineSavedObjectId: currentTimeline.savedObjectId, timelineTitle: title.length > 0 ? title : i18n.UNTITLED_TIMELINE, }) ); + + navigateToApp(`${APP_ID}:${SecurityPageName.case}`, { + path: getCaseDetailsUrl({ id }), + }); }, - [navigateToApp, onCloseCaseModal, currentTimeline, dispatch, timelineId, title] + [currentTimeline, dispatch, graphEventId, navigateToApp, onCloseCaseModal, timelineId, title] ); const datePickerWidth = useMemo( @@ -159,10 +166,12 @@ export const Properties = React.memo( isFavorite={isFavorite} noteIds={noteIds} onToggleShowNotes={onToggleShowNotes} + status={status} showDescription={width >= showDescriptionThreshold} showNotes={showNotes} showNotesFromWidth={width >= showNotesThreshold} timelineId={timelineId} + timelineType={timelineType} title={title} toggleLock={onToggleLock} updateDescription={updateDescription} @@ -174,6 +183,7 @@ export const Properties = React.memo( associateNote={associateNote} description={description} getNotesByIds={getNotesByIds} + graphEventId={graphEventId} isDataInTimeline={isDataInTimeline} noteIds={noteIds} onButtonClick={onButtonClick} @@ -190,6 +200,7 @@ export const Properties = React.memo( showUsersView={title.length > 0} status={status} timelineId={timelineId} + timelineType={timelineType} title={title} updateDescription={updateDescription} updateNote={updateNote} diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/new_template_timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/new_template_timeline.test.tsx index cd6233334c5de0..b1424848728135 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/new_template_timeline.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/new_template_timeline.test.tsx @@ -11,6 +11,7 @@ import { mockGlobalState, apolloClientObservable, SUB_PLUGINS_REDUCER, + kibanaObservable, createSecuritySolutionStorageMock, } from '../../../../common/mock'; import { createStore, State } from '../../../../common/store'; @@ -26,7 +27,13 @@ jest.mock('../../../../common/lib/kibana', () => { describe('NewTemplateTimeline', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - const store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + const store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); const mockClosePopover = jest.fn(); const mockTitle = 'NEW_TIMELINE'; let wrapper: ReactWrapper; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_left.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_left.tsx index 52766422e49c38..4673ba662b2e98 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_left.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_left.tsx @@ -10,9 +10,12 @@ import React from 'react'; import styled from 'styled-components'; import { Description, Name, NotesButton, StarIcon } from './helpers'; import { AssociateNote, UpdateNote } from '../../notes/helpers'; + import { Note } from '../../../../common/lib/note'; import { SuperDatePicker } from '../../../../common/components/super_date_picker'; +import { TimelineTypeLiteral, TimelineStatusLiteral } from '../../../../../common/types/timeline'; + import * as i18n from './translations'; type UpdateIsFavorite = ({ id, isFavorite }: { id: string; isFavorite: boolean }) => void; @@ -22,6 +25,7 @@ type UpdateDescription = ({ id, description }: { id: string; description: string interface Props { isFavorite: boolean; timelineId: string; + timelineType: TimelineTypeLiteral; updateIsFavorite: UpdateIsFavorite; showDescription: boolean; description: string; @@ -29,6 +33,7 @@ interface Props { updateTitle: UpdateTitle; updateDescription: UpdateDescription; showNotes: boolean; + status: TimelineStatusLiteral; associateNote: AssociateNote; showNotesFromWidth: boolean; getNotesByIds: (noteIds: string[]) => Note[]; @@ -77,8 +82,10 @@ export const PropertiesLeft = React.memo( showDescription, description, title, + timelineType, updateTitle, updateDescription, + status, showNotes, showNotesFromWidth, associateNote, @@ -120,10 +127,12 @@ export const PropertiesLeft = React.memo( noteIds={noteIds} showNotes={showNotes} size="l" + status={status} text={i18n.NOTES} toggleShowNotes={onToggleShowNotes} toolTip={i18n.NOTES_TOOL_TIP} updateNote={updateNote} + timelineType={timelineType} /> ) : null} diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.test.tsx index ae167515495f7e..a36e841f3f8714 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { PropertiesRight } from './properties_right'; import { useKibana } from '../../../../common/lib/kibana'; -import { TimelineStatus } from '../../../../../common/types/timeline'; +import { TimelineStatus, TimelineType } from '../../../../../common/types/timeline'; import { disableTemplate } from '../../../../../common/constants'; jest.mock('../../../../common/lib/kibana', () => { @@ -67,6 +67,7 @@ describe('Properties Right', () => { onOpenTimelineModal: jest.fn(), status: TimelineStatus.active, showTimelineModal: false, + timelineType: TimelineType.default, title: 'title', updateNote: jest.fn(), }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.tsx index 7d176d57b5d818..7a9fe85ae402b3 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/properties_right.tsx @@ -17,7 +17,7 @@ import { import { NewTimeline, Description, NotesButton, NewCase, ExistingCase } from './helpers'; import { disableTemplate } from '../../../../../common/constants'; -import { TimelineStatus } from '../../../../../common/types/timeline'; +import { TimelineStatusLiteral, TimelineTypeLiteral } from '../../../../../common/types/timeline'; import { InspectButton, InspectButtonContainer } from '../../../../common/components/inspect'; import { useKibana } from '../../../../common/lib/kibana'; @@ -68,6 +68,7 @@ interface PropertiesRightComponentProps { associateNote: AssociateNote; description: string; getNotesByIds: (noteIds: string[]) => Note[]; + graphEventId?: string; isDataInTimeline: boolean; noteIds: string[]; onButtonClick: () => void; @@ -82,9 +83,10 @@ interface PropertiesRightComponentProps { showNotesFromWidth: boolean; showTimelineModal: boolean; showUsersView: boolean; - status: TimelineStatus; + status: TimelineStatusLiteral; timelineId: string; title: string; + timelineType: TimelineTypeLiteral; updateDescription: UpdateDescription; updateNote: UpdateNote; usersViewing: string[]; @@ -94,6 +96,7 @@ const PropertiesRightComponent: React.FC = ({ associateNote, description, getNotesByIds, + graphEventId, isDataInTimeline, noteIds, onButtonClick, @@ -109,6 +112,7 @@ const PropertiesRightComponent: React.FC = ({ showTimelineModal, showUsersView, status, + timelineType, timelineId, title, updateDescription, @@ -166,6 +170,7 @@ const PropertiesRightComponent: React.FC = ({ = ({ noteIds={noteIds} showNotes={showNotes} size="l" + status={status} + timelineType={timelineType} text={i18n.NOTES} toggleShowNotes={onToggleShowNotes} toolTip={i18n.NOTES_TOOL_TIP} diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts index 1621afc91cdbf8..561f8e513aa090 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts @@ -112,7 +112,7 @@ export const NEW_TIMELINE = i18n.translate( export const NEW_TEMPLATE_TIMELINE = i18n.translate( 'xpack.securitySolution.timeline.properties.newTemplateTimelineButtonLabel', { - defaultMessage: 'Create template timeline', + defaultMessage: 'Create new timeline template', } ); @@ -123,10 +123,24 @@ export const ATTACH_TIMELINE_TO_NEW_CASE = i18n.translate( } ); +export const ATTACH_TO_NEW_CASE = i18n.translate( + 'xpack.securitySolution.timeline.properties.attachToNewCaseButtonLabel', + { + defaultMessage: 'Attach to new case', + } +); + export const ATTACH_TIMELINE_TO_EXISTING_CASE = i18n.translate( 'xpack.securitySolution.timeline.properties.existingCaseButtonLabel', { - defaultMessage: 'Attach timeline to existing case', + defaultMessage: 'Attach timeline to existing case...', + } +); + +export const ATTACH_TO_EXISTING_CASE = i18n.translate( + 'xpack.securitySolution.timeline.properties.attachToExistingCaseButtonLabel', + { + defaultMessage: 'Attach to existing case...', } ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx index 2b67cf75dcff9e..0ff4c0a70fff27 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx @@ -30,11 +30,7 @@ describe('SelectableTimeline', () => { }; }); - const { - SelectableTimeline, - - ORIGINAL_PAGE_SIZE, - } = jest.requireActual('./'); + const { SelectableTimeline, ORIGINAL_PAGE_SIZE } = jest.requireActual('./'); const props = { hideUntitled: false, @@ -94,8 +90,10 @@ describe('SelectableTimeline', () => { sortField: SortFieldTimeline.updated, sortOrder: Direction.desc, }, + status: null, onlyUserFavorite: false, timelineType: TimelineType.default, + templateTimelineType: null, }; beforeAll(() => { mount(); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx index 76c3a647a94394..dacaf325130d70 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx @@ -33,6 +33,7 @@ import * as i18nTimeline from '../../open_timeline/translations'; import { OpenTimelineResult } from '../../open_timeline/types'; import { getEmptyTagValue } from '../../../../common/components/empty_value'; import * as i18n from '../translations'; +import { useTimelineStatus } from '../../open_timeline/use_timeline_status'; const MyEuiFlexItem = styled(EuiFlexItem)` display: inline-block; @@ -88,7 +89,11 @@ export interface SelectableTimelineProps { searchTimelineValue, }: GetSelectableOptions) => EuiSelectableOption[]; onClosePopover: () => void; - onTimelineChange: (timelineTitle: string, timelineId: string | null) => void; + onTimelineChange: ( + timelineTitle: string, + timelineId: string | null, + graphEventId?: string + ) => void; timelineType: TimelineTypeLiteral; } @@ -114,6 +119,7 @@ const SelectableTimelineComponent: React.FC = ({ const [onlyFavorites, setOnlyFavorites] = useState(false); const [searchRef, setSearchRef] = useState(null); const { fetchAllTimeline, timelines, loading, totalCount: timelineCount } = useGetAllTimeline(); + const { timelineStatus, templateTimelineType } = useTimelineStatus({ timelineType }); const onSearchTimeline = useCallback((val) => { setSearchTimelineValue(val); @@ -202,7 +208,8 @@ const SelectableTimelineComponent: React.FC = ({ isEmpty(selectedTimeline[0].title) ? i18nTimeline.UNTITLED_TIMELINE : selectedTimeline[0].title, - selectedTimeline[0].id === '-1' ? null : selectedTimeline[0].id + selectedTimeline[0].id === '-1' ? null : selectedTimeline[0].id, + selectedTimeline[0].graphEventId ?? '' ); } onClosePopover(); @@ -244,24 +251,31 @@ const SelectableTimelineComponent: React.FC = ({ }, }; - useEffect( - () => - fetchAllTimeline({ - pageInfo: { - pageIndex: 1, - pageSize, - }, - search: searchTimelineValue, - sort: { - sortField: SortFieldTimeline.updated, - sortOrder: Direction.desc, - }, - onlyUserFavorite: onlyFavorites, - timelineType, - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [onlyFavorites, pageSize, searchTimelineValue, timelineType] - ); + useEffect(() => { + fetchAllTimeline({ + pageInfo: { + pageIndex: 1, + pageSize, + }, + search: searchTimelineValue, + sort: { + sortField: SortFieldTimeline.updated, + sortOrder: Direction.desc, + }, + onlyUserFavorite: onlyFavorites, + status: timelineStatus, + timelineType, + templateTimelineType, + }); + }, [ + fetchAllTimeline, + onlyFavorites, + pageSize, + searchTimelineValue, + timelineType, + timelineStatus, + templateTimelineType, + ]); return ( diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx index aad80cbdfe3372..55bcbbecda2690 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx @@ -24,11 +24,12 @@ export const TimelineBodyGlobalStyle = createGlobalStyle` export const TimelineBody = styled.div.attrs(({ className = '' }) => ({ className: `siemTimeline__body ${className}`, -}))<{ bodyHeight?: number }>` +}))<{ bodyHeight?: number; visible: boolean }>` height: ${({ bodyHeight }) => (bodyHeight ? `${bodyHeight}px` : 'auto')}; overflow: auto; scrollbar-width: thin; flex: 1; + visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')}; &::-webkit-scrollbar { height: ${({ theme }) => theme.eui.euiScrollBar}; @@ -89,10 +90,9 @@ export const EventsTrHeader = styled.div.attrs(({ className }) => ({ export const EventsThGroupActions = styled.div.attrs(({ className = '' }) => ({ className: `siemEventsTable__thGroupActions ${className}`, -}))<{ actionsColumnWidth: number; justifyContent: string }>` +}))<{ actionsColumnWidth: number }>` display: flex; flex: 0 0 ${({ actionsColumnWidth }) => `${actionsColumnWidth}px`}; - justify-content: ${({ justifyContent }) => justifyContent}; min-width: 0; `; @@ -139,14 +139,17 @@ export const EventsTh = styled.div.attrs(({ className = '' }) => ({ export const EventsThContent = styled.div.attrs(({ className = '' }) => ({ className: `siemEventsTable__thContent ${className}`, -}))<{ textAlign?: string }>` +}))<{ textAlign?: string; width?: number }>` font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; font-weight: ${({ theme }) => theme.eui.euiFontWeightSemiBold}; line-height: ${({ theme }) => theme.eui.euiLineHeight}; min-width: 0; padding: ${({ theme }) => theme.eui.paddingSizes.xs}; text-align: ${({ textAlign }) => textAlign}; - width: 100%; /* Using width: 100% instead of flex: 1 and max-width: 100% for IE11 */ + width: ${({ width }) => + width != null + ? `${width}px` + : '100%'}; /* Using width: 100% instead of flex: 1 and max-width: 100% for IE11 */ `; /* EVENTS BODY */ @@ -202,7 +205,6 @@ export const EventsTdGroupActions = styled.div.attrs(({ className = '' }) => ({ className: `siemEventsTable__tdGroupActions ${className}`, }))<{ actionsColumnWidth: number }>` display: flex; - justify-content: space-between; flex: 0 0 ${({ actionsColumnWidth }) => `${actionsColumnWidth}px`}; min-width: 0; `; @@ -234,14 +236,17 @@ export const EventsTd = styled.div.attrs(({ className = '', width }) `; export const EventsTdContent = styled.div.attrs(({ className }) => ({ - className: `siemEventsTable__tdContent ${className}`, -}))<{ textAlign?: string }>` + className: `siemEventsTable__tdContent ${className != null ? className : ''}`, +}))<{ textAlign?: string; width?: number }>` font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; line-height: ${({ theme }) => theme.eui.euiLineHeight}; min-width: 0; padding: ${({ theme }) => theme.eui.paddingSizes.xs}; text-align: ${({ textAlign }) => textAlign}; - width: 100%; /* Using width: 100% instead of flex: 1 and max-width: 100% for IE11 */ + width: ${({ width }) => + width != null + ? `${width}px` + : '100%'}; /* Using width: 100% instead of flex: 1 and max-width: 100% for IE11 */ `; /** diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx index 96703941f616e3..b58505546c3417 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx @@ -24,6 +24,7 @@ import { TimelineComponent, Props as TimelineComponentProps } from './timeline'; import { Sort } from './body/sort'; import { mockDataProviders } from './data_providers/mock/mock_data_providers'; import { useMountAppended } from '../../../common/utils/use_mount_appended'; +import { TimelineStatus } from '../../../../common/types/timeline'; jest.mock('../../../common/lib/kibana'); jest.mock('./properties/properties_right'); @@ -96,6 +97,7 @@ describe('Timeline', () => { showCallOutUnauthorizedMsg: false, start: startDate, sort, + status: TimelineStatus.active, toggleColumn: jest.fn(), usersViewing: ['elastic'], }; @@ -103,7 +105,11 @@ describe('Timeline', () => { describe('rendering', () => { test('renders correctly against snapshot', () => { - const wrapper = shallow(); + const wrapper = shallow( + + + + ); expect(wrapper).toMatchSnapshot(); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx index 884d693ca6ade0..07d4b004d2eda7 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx @@ -7,6 +7,7 @@ import { EuiFlyoutHeader, EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui'; import { getOr, isEmpty } from 'lodash/fp'; import React, { useState, useMemo, useEffect } from 'react'; +import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { FlyoutHeaderWithCloseButton } from '../flyout/header_with_close_button'; @@ -16,6 +17,7 @@ import { Direction } from '../../../graphql/types'; import { useKibana } from '../../../common/lib/kibana'; import { ColumnHeaderOptions, KqlMode, EventType } from '../../../timelines/store/timeline/model'; import { defaultHeaders } from './body/column_headers/default_headers'; +import { getInvestigateInResolverAction } from './body/helpers'; import { Sort } from './body/sort'; import { StatefulBody } from './body/stateful_body'; import { DataProvider } from './data_providers/data_provider'; @@ -38,6 +40,7 @@ import { IIndexPattern, } from '../../../../../../../src/plugins/data/public'; import { useManageTimeline } from '../manage_timeline'; +import { TimelineStatusLiteral } from '../../../../common/types/timeline'; const TimelineContainer = styled.div` height: 100%; @@ -88,6 +91,7 @@ export interface Props { end: number; eventType?: EventType; filters: Filter[]; + graphEventId?: string; id: string; indexPattern: IIndexPattern; indexToAdd: string[]; @@ -107,6 +111,7 @@ export interface Props { showCallOutUnauthorizedMsg: boolean; start: number; sort: Sort; + status: TimelineStatusLiteral; toggleColumn: (column: ColumnHeaderOptions) => void; usersViewing: string[]; } @@ -119,6 +124,7 @@ export const TimelineComponent: React.FC = ({ end, eventType, filters, + graphEventId, id, indexPattern, indexToAdd, @@ -137,10 +143,12 @@ export const TimelineComponent: React.FC = ({ show, showCallOutUnauthorizedMsg, start, + status, sort, toggleColumn, usersViewing, }) => { + const dispatch = useDispatch(); const kibana = useKibana(); const [filterManager] = useState(new FilterManager(kibana.services.uiSettings)); const combinedQueries = combineQueries({ @@ -168,9 +176,14 @@ export const TimelineComponent: React.FC = ({ initializeTimeline, setIsTimelineLoading, setTimelineFilterManager, + setTimelineRowActions, } = useManageTimeline(); useEffect(() => { initializeTimeline({ id, indexToAdd }); + setTimelineRowActions({ + id, + timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId: id })], + }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { @@ -197,12 +210,14 @@ export const TimelineComponent: React.FC = ({ indexPattern={indexPattern} dataProviders={dataProviders} filterManager={filterManager} + graphEventId={graphEventId} onDataProviderEdited={onDataProviderEdited} onDataProviderRemoved={onDataProviderRemoved} onToggleDataProviderEnabled={onToggleDataProviderEnabled} onToggleDataProviderExcluded={onToggleDataProviderExcluded} show={show} showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg} + status={status} /> diff --git a/x-pack/plugins/security_solution/public/timelines/containers/all/index.gql_query.ts b/x-pack/plugins/security_solution/public/timelines/containers/all/index.gql_query.ts index 60d000fe78184a..5cbc922f09c9ad 100644 --- a/x-pack/plugins/security_solution/public/timelines/containers/all/index.gql_query.ts +++ b/x-pack/plugins/security_solution/public/timelines/containers/all/index.gql_query.ts @@ -13,6 +13,8 @@ export const allTimelinesQuery = gql` $sort: SortTimeline $onlyUserFavorite: Boolean $timelineType: TimelineType + $templateTimelineType: TemplateTimelineType + $status: TimelineStatus ) { getAllTimeline( pageInfo: $pageInfo @@ -20,8 +22,15 @@ export const allTimelinesQuery = gql` sort: $sort onlyUserFavorite: $onlyUserFavorite timelineType: $timelineType + templateTimelineType: $templateTimelineType + status: $status ) { totalCount + defaultTimelineCount + templateTimelineCount + elasticTemplateTimelineCount + customTemplateTimelineCount + favoriteCount timeline { savedObjectId description diff --git a/x-pack/plugins/security_solution/public/timelines/containers/all/index.tsx b/x-pack/plugins/security_solution/public/timelines/containers/all/index.tsx index f025cf15181c3e..17cc0f64de0392 100644 --- a/x-pack/plugins/security_solution/public/timelines/containers/all/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/containers/all/index.tsx @@ -22,7 +22,11 @@ import { useApolloClient } from '../../../common/utils/apollo_context'; import { allTimelinesQuery } from './index.gql_query'; import * as i18n from '../../pages/translations'; -import { TimelineTypeLiteralWithNull } from '../../../../common/types/timeline'; +import { + TimelineTypeLiteralWithNull, + TimelineStatusLiteralWithNull, + TemplateTimelineTypeLiteralWithNull, +} from '../../../../common/types/timeline'; export interface AllTimelinesArgs { fetchAllTimeline: ({ @@ -30,11 +34,17 @@ export interface AllTimelinesArgs { pageInfo, search, sort, + status, timelineType, }: AllTimelinesVariables) => void; timelines: OpenTimelineResult[]; loading: boolean; totalCount: number; + customTemplateTimelineCount: number; + defaultTimelineCount: number; + elasticTemplateTimelineCount: number; + templateTimelineCount: number; + favoriteCount: number; } export interface AllTimelinesVariables { @@ -42,7 +52,9 @@ export interface AllTimelinesVariables { pageInfo: PageInfoTimeline; search: string; sort: SortTimeline; + status: TimelineStatusLiteralWithNull; timelineType: TimelineTypeLiteralWithNull; + templateTimelineType: TemplateTimelineTypeLiteralWithNull; } export const ALL_TIMELINE_QUERY_ID = 'FETCH_ALL_TIMELINES'; @@ -76,6 +88,7 @@ export const getAllTimeline = memoizeOne( ) : null, savedObjectId: timeline.savedObjectId, + status: timeline.status, title: timeline.title, updated: timeline.updated, updatedBy: timeline.updatedBy, @@ -90,27 +103,39 @@ export const useGetAllTimeline = (): AllTimelinesArgs => { loading: false, totalCount: 0, timelines: [], + customTemplateTimelineCount: 0, + defaultTimelineCount: 0, + elasticTemplateTimelineCount: 0, + templateTimelineCount: 0, + favoriteCount: 0, }); const fetchAllTimeline = useCallback( - ({ onlyUserFavorite, pageInfo, search, sort, timelineType }: AllTimelinesVariables) => { + async ({ + onlyUserFavorite, + pageInfo, + search, + sort, + status, + timelineType, + templateTimelineType, + }: AllTimelinesVariables) => { let didCancel = false; const abortCtrl = new AbortController(); const fetchData = async () => { try { if (apolloClient != null) { - setAllTimelines({ - ...allTimelines, - loading: true, - }); + setAllTimelines((prevState) => ({ ...prevState, loading: true })); const variables: GetAllTimeline.Variables = { onlyUserFavorite, pageInfo, search, sort, + status, timelineType, + templateTimelineType, }; const response = await apolloClient.query< GetAllTimeline.Query, @@ -125,8 +150,16 @@ export const useGetAllTimeline = (): AllTimelinesArgs => { }, }, }); - const totalCount = response?.data?.getAllTimeline?.totalCount ?? 0; - const timelines = response?.data?.getAllTimeline?.timeline ?? []; + const getAllTimelineResponse = response?.data?.getAllTimeline; + const totalCount = getAllTimelineResponse?.totalCount ?? 0; + const timelines = getAllTimelineResponse?.timeline ?? []; + const customTemplateTimelineCount = + getAllTimelineResponse?.customTemplateTimelineCount ?? 0; + const defaultTimelineCount = getAllTimelineResponse?.defaultTimelineCount ?? 0; + const elasticTemplateTimelineCount = + getAllTimelineResponse?.elasticTemplateTimelineCount ?? 0; + const templateTimelineCount = getAllTimelineResponse?.templateTimelineCount ?? 0; + const favoriteCount = getAllTimelineResponse?.favoriteCount ?? 0; if (!didCancel) { dispatch( inputsActions.setQuery({ @@ -141,6 +174,11 @@ export const useGetAllTimeline = (): AllTimelinesArgs => { loading: false, totalCount, timelines: getAllTimeline(JSON.stringify(variables), timelines as TimelineResult[]), + customTemplateTimelineCount, + defaultTimelineCount, + elasticTemplateTimelineCount, + templateTimelineCount, + favoriteCount, }); } } @@ -155,6 +193,11 @@ export const useGetAllTimeline = (): AllTimelinesArgs => { loading: false, totalCount: 0, timelines: [], + customTemplateTimelineCount: 0, + defaultTimelineCount: 0, + elasticTemplateTimelineCount: 0, + templateTimelineCount: 0, + favoriteCount: 0, }); } } @@ -165,7 +208,7 @@ export const useGetAllTimeline = (): AllTimelinesArgs => { abortCtrl.abort(); }; }, - [apolloClient, allTimelines, dispatch, dispatchToaster] + [apolloClient, dispatch, dispatchToaster] ); useEffect(() => { diff --git a/x-pack/plugins/security_solution/public/timelines/containers/api.test.ts b/x-pack/plugins/security_solution/public/timelines/containers/api.test.ts index 26373fa1a825d5..8a2f91d7171f74 100644 --- a/x-pack/plugins/security_solution/public/timelines/containers/api.test.ts +++ b/x-pack/plugins/security_solution/public/timelines/containers/api.test.ts @@ -165,6 +165,7 @@ describe('persistTimeline', () => { }, }, }; + const version = null; const fetchMock = jest.fn(); const postMock = jest.fn(); @@ -180,7 +181,11 @@ describe('persistTimeline', () => { patch: patchMock.mockReturnValue(mockPatchTimelineResponse), }, }); - api.persistTimeline({ timelineId, timeline: initialDraftTimeline, version }); + api.persistTimeline({ + timelineId, + timeline: initialDraftTimeline, + version, + }); }); afterAll(() => { diff --git a/x-pack/plugins/security_solution/public/timelines/containers/api.ts b/x-pack/plugins/security_solution/public/timelines/containers/api.ts index 10893feccfed4d..fbd89268880dbe 100644 --- a/x-pack/plugins/security_solution/public/timelines/containers/api.ts +++ b/x-pack/plugins/security_solution/public/timelines/containers/api.ts @@ -12,6 +12,8 @@ import { TimelineResponse, TimelineResponseType, TimelineStatus, + TimelineErrorResponseType, + TimelineErrorResponse, } from '../../../common/types/timeline'; import { TimelineInput, TimelineType } from '../../graphql/types'; import { @@ -48,6 +50,12 @@ const decodeTimelineResponse = (respTimeline?: TimelineResponse) => fold(throwErrors(createToasterPlainError), identity) ); +const decodeTimelineErrorResponse = (respTimeline?: TimelineErrorResponse) => + pipe( + TimelineErrorResponseType.decode(respTimeline), + fold(throwErrors(createToasterPlainError), identity) + ); + const postTimeline = async ({ timeline }: RequestPostTimeline): Promise => { const response = await KibanaServices.get().http.post(TIMELINE_URL, { method: 'POST', @@ -61,12 +69,19 @@ const patchTimeline = async ({ timelineId, timeline, version, -}: RequestPatchTimeline): Promise => { - const response = await KibanaServices.get().http.patch(TIMELINE_URL, { - method: 'PATCH', - body: JSON.stringify({ timeline, timelineId, version }), - }); - +}: RequestPatchTimeline): Promise => { + let response = null; + try { + response = await KibanaServices.get().http.patch(TIMELINE_URL, { + method: 'PATCH', + body: JSON.stringify({ timeline, timelineId, version }), + }); + } catch (err) { + // For Future developer + // We are not rejecting our promise here because we had issue with our RXJS epic + // the issue we were not able to pass the right object to it so we did manage the error in the success + return Promise.resolve(decodeTimelineErrorResponse(err.body)); + } return decodeTimelineResponse(response); }; @@ -74,17 +89,31 @@ export const persistTimeline = async ({ timelineId, timeline, version, -}: RequestPersistTimeline): Promise => { - if (timelineId == null && timeline.status === TimelineStatus.draft) { - const draftTimeline = await cleanDraftTimeline({ timelineType: timeline.timelineType! }); +}: RequestPersistTimeline): Promise => { + if (timelineId == null && timeline.status === TimelineStatus.draft && timeline) { + const draftTimeline = await cleanDraftTimeline({ + timelineType: timeline.timelineType!, + templateTimelineId: timeline.templateTimelineId ?? undefined, + templateTimelineVersion: timeline.templateTimelineVersion ?? undefined, + }); + + const templateTimelineInfo = + timeline.timelineType! === TimelineType.template + ? { + templateTimelineId: + draftTimeline.data.persistTimeline.timeline.templateTimelineId ?? + timeline.templateTimelineId, + templateTimelineVersion: + draftTimeline.data.persistTimeline.timeline.templateTimelineVersion ?? + timeline.templateTimelineVersion, + } + : {}; return patchTimeline({ timelineId: draftTimeline.data.persistTimeline.timeline.savedObjectId, timeline: { ...timeline, - templateTimelineId: draftTimeline.data.persistTimeline.timeline.templateTimelineId, - templateTimelineVersion: - draftTimeline.data.persistTimeline.timeline.templateTimelineVersion, + ...templateTimelineInfo, }, version: draftTimeline.data.persistTimeline.timeline.version ?? '', }); @@ -103,8 +132,6 @@ export const persistTimeline = async ({ export const importTimelines = async ({ fileToImport, - overwrite = false, - signal, }: ImportDataProps): Promise => { const formData = new FormData(); formData.append('file', fileToImport); @@ -112,31 +139,25 @@ export const importTimelines = async ({ return KibanaServices.get().http.fetch(`${TIMELINE_IMPORT_URL}`, { method: 'POST', headers: { 'Content-Type': undefined }, - query: { overwrite }, body: formData, - signal, }); }; export const exportSelectedTimeline: ExportSelectedData = async ({ - excludeExportDetails = false, filename = `timelines_export.ndjson`, ids = [], signal, }): Promise => { const body = ids.length > 0 ? JSON.stringify({ ids }) : undefined; - const response = await KibanaServices.get().http.fetch(`${TIMELINE_EXPORT_URL}`, { + const response = await KibanaServices.get().http.fetch<{ body: Blob }>(`${TIMELINE_EXPORT_URL}`, { method: 'POST', body, query: { - exclude_export_details: excludeExportDetails, file_name: filename, }, - signal, - asResponse: true, }); - return response.body!; + return response.body; }; export const getDraftTimeline = async ({ @@ -155,12 +176,24 @@ export const getDraftTimeline = async ({ export const cleanDraftTimeline = async ({ timelineType, + templateTimelineId, + templateTimelineVersion, }: { timelineType: TimelineType; + templateTimelineId?: string; + templateTimelineVersion?: number; }): Promise => { + const templateTimelineInfo = + timelineType === TimelineType.template + ? { + templateTimelineId, + templateTimelineVersion, + } + : {}; const response = await KibanaServices.get().http.post(TIMELINE_DRAFT_URL, { body: JSON.stringify({ timelineType, + ...templateTimelineInfo, }), }); diff --git a/x-pack/plugins/security_solution/public/timelines/containers/index.gql_query.ts b/x-pack/plugins/security_solution/public/timelines/containers/index.gql_query.ts index 53d0b98570bcbf..e2a268e750b4a5 100644 --- a/x-pack/plugins/security_solution/public/timelines/containers/index.gql_query.ts +++ b/x-pack/plugins/security_solution/public/timelines/containers/index.gql_query.ts @@ -89,6 +89,9 @@ export const timelineQuery = gql` timezone type } + agent { + type + } auditd { result session @@ -285,6 +288,7 @@ export const timelineQuery = gql` name ppid args + entity_id executable title working_directory diff --git a/x-pack/plugins/security_solution/public/timelines/pages/translations.ts b/x-pack/plugins/security_solution/public/timelines/pages/translations.ts index 3ec98d47c67ea6..5a9f80013a3ede 100644 --- a/x-pack/plugins/security_solution/public/timelines/pages/translations.ts +++ b/x-pack/plugins/security_solution/public/timelines/pages/translations.ts @@ -30,3 +30,17 @@ export const ERROR_FETCHING_TIMELINES_TITLE = i18n.translate( defaultMessage: 'Failed to query all timelines data', } ); + +export const UPDATE_TIMELINE_ERROR_TITLE = i18n.translate( + 'xpack.securitySolution.timelines.updateTimelineErrorTitle', + { + defaultMessage: 'Timeline error', + } +); + +export const UPDATE_TIMELINE_ERROR_TEXT = i18n.translate( + 'xpack.securitySolution.timelines.updateTimelineErrorText', + { + defaultMessage: 'Something went wrong', + } +); diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts index c5df017604b0c6..8fd75547cc539b 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts @@ -70,6 +70,8 @@ export const createTimeline = actionCreator<{ showCheckboxes?: boolean; showRowRenderers?: boolean; timelineType?: TimelineTypeLiteral; + templateTimelineId?: string; + templateTimelineVersion?: number; }>('CREATE_TIMELINE'); export const pinEvent = actionCreator<{ id: string; eventId: string }>('PIN_EVENT'); @@ -87,6 +89,10 @@ export const removeProvider = actionCreator<{ export const showTimeline = actionCreator<{ id: string; show: boolean }>('SHOW_TIMELINE'); +export const updateTimelineGraphEventId = actionCreator<{ id: string; graphEventId: string }>( + 'UPDATE_TIMELINE_GRAPH_EVENT_ID' +); + export const unPinEvent = actionCreator<{ id: string; eventId: string }>('UN_PIN_EVENT'); export const updateTimeline = actionCreator<{ diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic.ts index 0314d22812733a..94acb9d92075b7 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic.ts +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic.ts @@ -28,8 +28,12 @@ import { takeUntil, } from 'rxjs/operators'; -import { esFilters, Filter, MatchAllFilter } from '../../../../../../../src/plugins/data/public'; -import { TimelineStatus } from '../../../../common/types/timeline'; +import { + esFilters, + Filter, + MatchAllFilter, +} from '../../../../../../.../../../src/plugins/data/public'; +import { TimelineStatus, TimelineErrorResponse } from '../../../../common/types/timeline'; import { inputsModel } from '../../../common/store/inputs'; import { TimelineType, @@ -39,6 +43,10 @@ import { } from '../../../graphql/types'; import { addError } from '../../../common/store/app/actions'; +import { persistTimeline } from '../../containers/api'; +import { ALL_TIMELINE_QUERY_ID } from '../../containers/all'; +import * as i18n from '../../pages/translations'; + import { applyKqlFilterQuery, addProvider, @@ -75,8 +83,6 @@ import { isNotNull } from './helpers'; import { dispatcherTimelinePersistQueue } from './epic_dispatcher_timeline_persistence_queue'; import { myEpicTimelineId } from './my_epic_timeline_id'; import { ActionTimeline, TimelineEpicDependencies } from './types'; -import { persistTimeline } from '../../containers/api'; -import { ALL_TIMELINE_QUERY_ID } from '../../containers/all'; const timelineActionsType = [ applyKqlFilterQuery.type, @@ -117,6 +123,7 @@ export const createTimelineEpic = (): Epic< timelineByIdSelector, timelineTimeRangeSelector, apolloClient$, + kibana$, } ) => { const timeline$ = state$.pipe(map(timelineByIdSelector), filter(isNotNull)); @@ -142,13 +149,24 @@ export const createTimelineEpic = (): Epic< if (action.type === addError.type) { return true; } - if (action.type === createTimeline.type && isItAtimelineAction(timelineId)) { + if ( + isItAtimelineAction(timelineId) && + timelineObj != null && + timelineObj.status != null && + TimelineStatus.immutable === timelineObj.status + ) { + return false; + } else if (action.type === createTimeline.type && isItAtimelineAction(timelineId)) { myEpicTimelineId.setTimelineVersion(null); myEpicTimelineId.setTimelineId(null); + myEpicTimelineId.setTemplateTimelineId(null); + myEpicTimelineId.setTemplateTimelineVersion(null); } else if (action.type === addTimeline.type && isItAtimelineAction(timelineId)) { const addNewTimeline: TimelineModel = get('payload.timeline', action); myEpicTimelineId.setTimelineId(addNewTimeline.savedObjectId); myEpicTimelineId.setTimelineVersion(addNewTimeline.version); + myEpicTimelineId.setTemplateTimelineId(addNewTimeline.templateTimelineId); + myEpicTimelineId.setTemplateTimelineVersion(addNewTimeline.templateTimelineVersion); return true; } else if ( timelineActionsType.includes(action.type) && @@ -172,6 +190,8 @@ export const createTimelineEpic = (): Epic< const action: ActionTimeline = get('action', objAction); const timelineId = myEpicTimelineId.getTimelineId(); const version = myEpicTimelineId.getTimelineVersion(); + const templateTimelineId = myEpicTimelineId.getTemplateTimelineId(); + const templateTimelineVersion = myEpicTimelineId.getTemplateTimelineVersion(); if (timelineNoteActionsType.includes(action.type)) { return epicPersistNote( @@ -207,13 +227,37 @@ export const createTimelineEpic = (): Epic< persistTimeline({ timelineId, version, - timeline: convertTimelineAsInput(timeline[action.payload.id], timelineTimeRange), + timeline: { + ...convertTimelineAsInput(timeline[action.payload.id], timelineTimeRange), + templateTimelineId, + templateTimelineVersion, + }, }) ).pipe( - withLatestFrom(timeline$, allTimelineQuery$), - mergeMap(([result, recentTimeline, allTimelineQuery]) => { + withLatestFrom(timeline$, allTimelineQuery$, kibana$), + mergeMap(([result, recentTimeline, allTimelineQuery, kibana]) => { + const error = result as TimelineErrorResponse; + if (error.status_code != null && error.status_code === 405) { + kibana.notifications!.toasts.addDanger({ + title: i18n.UPDATE_TIMELINE_ERROR_TITLE, + text: error.message ?? i18n.UPDATE_TIMELINE_ERROR_TEXT, + }); + return [ + endTimelineSaving({ + id: action.payload.id, + }), + ]; + } + const savedTimeline = recentTimeline[action.payload.id]; const response: ResponseTimeline = get('data.persistTimeline', result); + if (response == null) { + return [ + endTimelineSaving({ + id: action.payload.id, + }), + ]; + } const callOutMsg = response.code === 403 ? [showCallOutUnauthorizedMsg()] : []; if (allTimelineQuery.refetch != null) { @@ -260,6 +304,12 @@ export const createTimelineEpic = (): Epic< myEpicTimelineId.setTimelineVersion( updatedTimeline[get('payload.id', checkAction)].version ); + myEpicTimelineId.setTemplateTimelineId( + updatedTimeline[get('payload.id', checkAction)].templateTimelineId + ); + myEpicTimelineId.setTemplateTimelineVersion( + updatedTimeline[get('payload.id', checkAction)].templateTimelineVersion + ); return true; } return false; diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx index 34778aba7873cc..388869194085c8 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx @@ -15,6 +15,7 @@ import { defaultHeaders, createSecuritySolutionStorageMock, mockIndexPattern, + kibanaObservable, } from '../../../common/mock'; import { createStore, State } from '../../../common/store'; @@ -38,6 +39,7 @@ import { Direction } from '../../../graphql/types'; import { addTimelineInStorage } from '../../containers/local_storage'; import { isPageTimeline } from './epic_local_storage'; +import { TimelineStatus } from '../../../../common/types/timeline'; jest.mock('../../containers/local_storage'); @@ -50,7 +52,13 @@ const addTimelineInStorageMock = addTimelineInStorage as jest.Mock; describe('epicLocalStorage', () => { const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); - let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + let store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); let props = {} as TimelineComponentProps; const sort: Sort = { @@ -63,7 +71,13 @@ describe('epicLocalStorage', () => { const indexPattern = mockIndexPattern; beforeEach(() => { - store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable, storage); + store = createStore( + state, + SUB_PLUGINS_REDUCER, + apolloClientObservable, + kibanaObservable, + storage + ); props = { browserFields: mockBrowserFields, columns: defaultHeaders, @@ -89,6 +103,7 @@ describe('epicLocalStorage', () => { show: true, showCallOutUnauthorizedMsg: false, start: startDate, + status: TimelineStatus.active, sort, toggleColumn: jest.fn(), usersViewing: ['elastic'], diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts index 15f956fa79d3cc..33770aacde6bba 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts @@ -6,6 +6,7 @@ import { getOr, omit, uniq, isEmpty, isEqualWith, union } from 'lodash/fp'; +import uuid from 'uuid'; import { Filter } from '../../../../../../../src/plugins/data/public'; import { disableTemplate } from '../../../../common/constants'; @@ -19,7 +20,7 @@ import { } from '../../../timelines/components/timeline/data_providers/data_provider'; import { KueryFilterQuery, SerializedFilterQuery } from '../../../common/store/model'; import { TimelineNonEcsData } from '../../../graphql/types'; -import { TimelineTypeLiteral } from '../../../../common/types/timeline'; +import { TimelineTypeLiteral, TimelineType } from '../../../../common/types/timeline'; import { timelineDefaults } from './defaults'; import { ColumnHeaderOptions, KqlMode, TimelineModel, EventType } from './model'; @@ -158,28 +159,38 @@ export const addNewTimeline = ({ showRowRenderers = true, timelineById, timelineType, -}: AddNewTimelineParams): TimelineById => ({ - ...timelineById, - [id]: { - id, - ...timelineDefaults, - columns, - dataProviders, - dateRange, - filters, - itemsPerPage, - kqlQuery, - sort, - show, - savedObjectId: null, - version: null, - isSaving: false, - isLoading: false, - showCheckboxes, - showRowRenderers, - timelineType: !disableTemplate ? timelineType : timelineDefaults.timelineType, - }, -}); +}: AddNewTimelineParams): TimelineById => { + const templateTimelineInfo = + !disableTemplate && timelineType === TimelineType.template + ? { + templateTimelineId: uuid.v4(), + templateTimelineVersion: 1, + } + : {}; + return { + ...timelineById, + [id]: { + id, + ...timelineDefaults, + columns, + dataProviders, + dateRange, + filters, + itemsPerPage, + kqlQuery, + sort, + show, + savedObjectId: null, + version: null, + isSaving: false, + isLoading: false, + showCheckboxes, + showRowRenderers, + timelineType: !disableTemplate ? timelineType : timelineDefaults.timelineType, + ...templateTimelineInfo, + }, + }; +}; interface PinTimelineEventParams { id: string; @@ -228,6 +239,26 @@ export const updateTimelineShowTimeline = ({ }; }; +export const updateGraphEventId = ({ + id, + graphEventId, + timelineById, +}: { + id: string; + graphEventId: string; + timelineById: TimelineById; +}): TimelineById => { + const timeline = timelineById[id]; + + return { + ...timelineById, + [id]: { + ...timeline, + graphEventId, + }, + }; +}; + interface ApplyDeltaToCurrentWidthParams { id: string; delta: number; diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/manage_timeline_id.tsx b/x-pack/plugins/security_solution/public/timelines/store/timeline/manage_timeline_id.tsx index d68c9bd42d974c..6f8666a349d78c 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/manage_timeline_id.tsx +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/manage_timeline_id.tsx @@ -7,6 +7,8 @@ export class ManageEpicTimelineId { private timelineId: string | null = null; private version: string | null = null; + private templateTimelineId: string | null = null; + private templateVersion: number | null = null; public getTimelineId(): string | null { return this.timelineId; @@ -16,6 +18,14 @@ export class ManageEpicTimelineId { return this.version; } + public getTemplateTimelineId(): string | null { + return this.templateTimelineId; + } + + public getTemplateTimelineVersion(): number | null { + return this.templateVersion; + } + public setTimelineId(timelineId: string | null) { this.timelineId = timelineId; } @@ -23,4 +33,12 @@ export class ManageEpicTimelineId { public setTimelineVersion(version: string | null) { this.version = version; } + + public setTemplateTimelineId(templateTimelineId: string | null) { + this.templateTimelineId = templateTimelineId; + } + + public setTemplateTimelineVersion(templateVersion: number | null) { + this.templateVersion = templateVersion; + } } diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/model.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/model.ts index caad70226365af..57895fea8f8ff8 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/model.ts +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/model.ts @@ -55,6 +55,8 @@ export interface TimelineModel { /** A map of events in this timeline to the chronologically ordered notes (in this timeline) associated with the event */ eventIdToNoteIds: Record; filters?: Filter[]; + /** When non-empty, display a graph view for this event */ + graphEventId?: string; /** The chronological history of actions related to this timeline */ historyIds: string[]; /** The chronological history of actions related to this timeline */ @@ -129,6 +131,7 @@ export type SubsetTimelineModel = Readonly< | 'description' | 'eventType' | 'eventIdToNoteIds' + | 'graphEventId' | 'highlightedDropAndProviderId' | 'historyIds' | 'isFavorite' @@ -157,7 +160,6 @@ export type SubsetTimelineModel = Readonly< | 'isLoading' | 'savedObjectId' | 'version' - | 'timelineType' | 'status' > >; @@ -165,4 +167,5 @@ export type SubsetTimelineModel = Readonly< export interface TimelineUrl { id: string; isOpen: boolean; + graphEventId?: string; } diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.test.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.test.ts index 3bdb16be79939a..6e7a36079a0c34 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.test.ts +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.test.ts @@ -1788,6 +1788,7 @@ describe('Timeline', () => { isLoading: false, id: 'foo', savedObjectId: null, + showRowRenderers: true, kqlMode: 'filter', kqlQuery: { filterQuery: null, filterQueryDraft: null }, loadingEventIds: [], @@ -1802,7 +1803,6 @@ describe('Timeline', () => { }, selectedEventIds: {}, show: true, - showRowRenderers: true, showCheckboxes: false, sort: { columnId: '@timestamp', diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.ts index 5e314f15974513..4072b4ac2f78b3 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.ts +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.ts @@ -53,6 +53,7 @@ import { updateRange, updateSort, updateTimeline, + updateTimelineGraphEventId, updateTitle, upsertColumn, } from './actions'; @@ -94,6 +95,7 @@ import { updateTimelineTitle, upsertTimelineColumn, updateSavedQuery, + updateGraphEventId, updateFilters, updateTimelineEventType, } from './helpers'; @@ -135,24 +137,26 @@ export const timelineReducer = reducerWithInitialState(initialTimelineState) timelineType = TimelineType.default, filters, } - ) => ({ - ...state, - timelineById: addNewTimeline({ - columns, - dataProviders, - dateRange, - filters, - id, - itemsPerPage, - kqlQuery, - sort, - show, - showCheckboxes, - showRowRenderers, - timelineById: state.timelineById, - timelineType, - }), - }) + ) => { + return { + ...state, + timelineById: addNewTimeline({ + columns, + dataProviders, + dateRange, + filters, + id, + itemsPerPage, + kqlQuery, + sort, + show, + showCheckboxes, + showRowRenderers, + timelineById: state.timelineById, + timelineType, + }), + }; + } ) .case(upsertColumn, (state, { column, id, index }) => ({ ...state, @@ -194,6 +198,10 @@ export const timelineReducer = reducerWithInitialState(initialTimelineState) ...state, timelineById: updateTimelineShowTimeline({ id, show, timelineById: state.timelineById }), })) + .case(updateTimelineGraphEventId, (state, { id, graphEventId }) => ({ + ...state, + timelineById: updateGraphEventId({ id, graphEventId, timelineById: state.timelineById }), + })) .case(applyDeltaToColumnWidth, (state, { id, columnId, delta }) => ({ ...state, timelineById: applyDeltaToTimelineColumnWidth({ diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/types.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/types.ts index 5262c72a6140c9..c64ed608339b67 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/types.ts +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/types.ts @@ -10,6 +10,8 @@ import { Storage } from '../../../../../../../src/plugins/kibana_utils/public'; import { AppApolloClient } from '../../../common/lib/lib'; import { inputsModel } from '../../../common/store/inputs'; import { NotesById } from '../../../common/store/app/model'; +import { StartServices } from '../../../types'; + import { TimelineModel } from './model'; export interface AutoSavedWarningMsg { @@ -23,6 +25,7 @@ export interface TimelineById { } export interface InsertTimeline { + graphEventId?: string; timelineId: string; timelineSavedObjectId: string | null; timelineTitle: string; @@ -52,5 +55,6 @@ export interface TimelineEpicDependencies { selectAllTimelineQuery: () => (state: State, id: string) => inputsModel.GlobalQuery; selectNotesByIdSelector: (state: State) => NotesById; apolloClient$: Observable; + kibana$: Observable; storage: Storage; } diff --git a/x-pack/plugins/security_solution/public/types.ts b/x-pack/plugins/security_solution/public/types.ts index 6d59824702cfa9..e212289458ed1b 100644 --- a/x-pack/plugins/security_solution/public/types.ts +++ b/x-pack/plugins/security_solution/public/types.ts @@ -19,6 +19,7 @@ import { TriggersAndActionsUIPublicPluginStart as TriggersActionsStart, } from '../../triggers_actions_ui/public'; import { SecurityPluginSetup } from '../../security/public'; +import { AppFrontendLibs } from './common/lib/lib'; export interface SetupPlugins { home: HomePublicPluginSetup; @@ -47,3 +48,7 @@ export type StartServices = CoreStart & export interface PluginSetup {} // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface PluginStart {} + +export interface AppObservableLibs extends AppFrontendLibs { + kibana: CoreStart; +} diff --git a/x-pack/plugins/security_solution/server/graphql/ecs/schema.gql.ts b/x-pack/plugins/security_solution/server/graphql/ecs/schema.gql.ts index 9bf55cfe1ed2a0..52011e14167173 100644 --- a/x-pack/plugins/security_solution/server/graphql/ecs/schema.gql.ts +++ b/x-pack/plugins/security_solution/server/graphql/ecs/schema.gql.ts @@ -60,6 +60,10 @@ export const ecsSchema = gql` sequence: ToStringArray } + type AgentEcsField { + type: ToStringArray + } + type AuditdData { acct: ToStringArray terminal: ToStringArray @@ -110,6 +114,7 @@ export const ecsSchema = gql` name: ToStringArray ppid: ToNumberArray args: ToStringArray + entity_id: ToStringArray executable: ToStringArray title: ToStringArray thread: Thread @@ -425,6 +430,7 @@ export const ecsSchema = gql` type ECS { _id: String! _index: String + agent: AgentEcsField auditd: AuditdEcsFields destination: DestinationEcsFields dns: DnsEcsFields diff --git a/x-pack/plugins/security_solution/server/graphql/timeline/resolvers.ts b/x-pack/plugins/security_solution/server/graphql/timeline/resolvers.ts index a40ef5466c7808..ab729bae6474d2 100644 --- a/x-pack/plugins/security_solution/server/graphql/timeline/resolvers.ts +++ b/x-pack/plugins/security_solution/server/graphql/timeline/resolvers.ts @@ -53,7 +53,9 @@ export const createTimelineResolvers = ( args.pageInfo || null, args.search || null, args.sort || null, - args.timelineType || null + args.status || null, + args.timelineType || null, + args.templateTimelineType || null ); }, }, diff --git a/x-pack/plugins/security_solution/server/graphql/timeline/schema.gql.ts b/x-pack/plugins/security_solution/server/graphql/timeline/schema.gql.ts index b9aa8534ab0e9c..a9d07389797dba 100644 --- a/x-pack/plugins/security_solution/server/graphql/timeline/schema.gql.ts +++ b/x-pack/plugins/security_solution/server/graphql/timeline/schema.gql.ts @@ -133,6 +133,12 @@ export const timelineSchema = gql` enum TimelineStatus { active draft + immutable + } + + enum TemplateTimelineType { + elastic + custom } input TimelineInput { @@ -277,6 +283,11 @@ export const timelineSchema = gql` type ResponseTimelines { timeline: [TimelineResult]! totalCount: Float + defaultTimelineCount: Float + templateTimelineCount: Float + elasticTemplateTimelineCount: Float + customTemplateTimelineCount: Float + favoriteCount: Float } ######################### @@ -285,7 +296,7 @@ export const timelineSchema = gql` extend type Query { getOneTimeline(id: ID!): TimelineResult! - getAllTimeline(pageInfo: PageInfoTimeline, search: String, sort: SortTimeline, onlyUserFavorite: Boolean, timelineType: TimelineType): ResponseTimelines! + getAllTimeline(pageInfo: PageInfoTimeline, search: String, sort: SortTimeline, onlyUserFavorite: Boolean, timelineType: TimelineType, templateTimelineType: TemplateTimelineType, status: TimelineStatus): ResponseTimelines! } extend type Mutation { diff --git a/x-pack/plugins/security_solution/server/graphql/types.ts b/x-pack/plugins/security_solution/server/graphql/types.ts index 4a063647a183d9..2db3052bae66ff 100644 --- a/x-pack/plugins/security_solution/server/graphql/types.ts +++ b/x-pack/plugins/security_solution/server/graphql/types.ts @@ -347,6 +347,7 @@ export enum TlsFields { export enum TimelineStatus { active = 'active', draft = 'draft', + immutable = 'immutable', } export enum TimelineType { @@ -361,6 +362,11 @@ export enum SortFieldTimeline { created = 'created', } +export enum TemplateTimelineType { + elastic = 'elastic', + custom = 'custom', +} + export enum NetworkDirectionEcs { inbound = 'inbound', outbound = 'outbound', @@ -765,6 +771,8 @@ export interface Ecs { _index?: Maybe; + agent?: Maybe; + auditd?: Maybe; destination?: Maybe; @@ -812,6 +820,10 @@ export interface Ecs { system?: Maybe; } +export interface AgentEcsField { + type?: Maybe; +} + export interface AuditdEcsFields { result?: Maybe; @@ -1267,6 +1279,8 @@ export interface ProcessEcsFields { args?: Maybe; + entity_id?: Maybe; + executable?: Maybe; title?: Maybe; @@ -2111,6 +2125,16 @@ export interface ResponseTimelines { timeline: (Maybe)[]; totalCount?: Maybe; + + defaultTimelineCount?: Maybe; + + templateTimelineCount?: Maybe; + + elasticTemplateTimelineCount?: Maybe; + + customTemplateTimelineCount?: Maybe; + + favoriteCount?: Maybe; } export interface Mutation { @@ -2248,6 +2272,10 @@ export interface GetAllTimelineQueryArgs { onlyUserFavorite?: Maybe; timelineType?: Maybe; + + templateTimelineType?: Maybe; + + status?: Maybe; } export interface AuthenticationsSourceArgs { timerange: TimerangeInput; @@ -2706,6 +2734,10 @@ export namespace QueryResolvers { onlyUserFavorite?: Maybe; timelineType?: Maybe; + + templateTimelineType?: Maybe; + + status?: Maybe; } } @@ -4083,6 +4115,8 @@ export namespace EcsResolvers { _index?: _IndexResolver, TypeParent, TContext>; + agent?: AgentResolver, TypeParent, TContext>; + auditd?: AuditdResolver, TypeParent, TContext>; destination?: DestinationResolver, TypeParent, TContext>; @@ -4140,6 +4174,11 @@ export namespace EcsResolvers { Parent, TContext >; + export type AgentResolver< + R = Maybe, + Parent = Ecs, + TContext = SiemContext + > = Resolver; export type AuditdResolver< R = Maybe, Parent = Ecs, @@ -4257,6 +4296,18 @@ export namespace EcsResolvers { > = Resolver; } +export namespace AgentEcsFieldResolvers { + export interface Resolvers { + type?: TypeResolver, TypeParent, TContext>; + } + + export type TypeResolver< + R = Maybe, + Parent = AgentEcsField, + TContext = SiemContext + > = Resolver; +} + export namespace AuditdEcsFieldsResolvers { export interface Resolvers { result?: ResultResolver, TypeParent, TContext>; @@ -5761,6 +5812,8 @@ export namespace ProcessEcsFieldsResolvers { args?: ArgsResolver, TypeParent, TContext>; + entity_id?: EntityIdResolver, TypeParent, TContext>; + executable?: ExecutableResolver, TypeParent, TContext>; title?: TitleResolver, TypeParent, TContext>; @@ -5795,6 +5848,11 @@ export namespace ProcessEcsFieldsResolvers { Parent = ProcessEcsFields, TContext = SiemContext > = Resolver; + export type EntityIdResolver< + R = Maybe, + Parent = ProcessEcsFields, + TContext = SiemContext + > = Resolver; export type ExecutableResolver< R = Maybe, Parent = ProcessEcsFields, @@ -8636,6 +8694,24 @@ export namespace ResponseTimelinesResolvers { timeline?: TimelineResolver<(Maybe)[], TypeParent, TContext>; totalCount?: TotalCountResolver, TypeParent, TContext>; + + defaultTimelineCount?: DefaultTimelineCountResolver, TypeParent, TContext>; + + templateTimelineCount?: TemplateTimelineCountResolver, TypeParent, TContext>; + + elasticTemplateTimelineCount?: ElasticTemplateTimelineCountResolver< + Maybe, + TypeParent, + TContext + >; + + customTemplateTimelineCount?: CustomTemplateTimelineCountResolver< + Maybe, + TypeParent, + TContext + >; + + favoriteCount?: FavoriteCountResolver, TypeParent, TContext>; } export type TimelineResolver< @@ -8648,6 +8724,31 @@ export namespace ResponseTimelinesResolvers { Parent = ResponseTimelines, TContext = SiemContext > = Resolver; + export type DefaultTimelineCountResolver< + R = Maybe, + Parent = ResponseTimelines, + TContext = SiemContext + > = Resolver; + export type TemplateTimelineCountResolver< + R = Maybe, + Parent = ResponseTimelines, + TContext = SiemContext + > = Resolver; + export type ElasticTemplateTimelineCountResolver< + R = Maybe, + Parent = ResponseTimelines, + TContext = SiemContext + > = Resolver; + export type CustomTemplateTimelineCountResolver< + R = Maybe, + Parent = ResponseTimelines, + TContext = SiemContext + > = Resolver; + export type FavoriteCountResolver< + R = Maybe, + Parent = ResponseTimelines, + TContext = SiemContext + > = Resolver; } export namespace MutationResolvers { @@ -9110,6 +9211,7 @@ export type IResolvers = { TimelineItem?: TimelineItemResolvers.Resolvers; TimelineNonEcsData?: TimelineNonEcsDataResolvers.Resolvers; Ecs?: EcsResolvers.Resolvers; + AgentEcsField?: AgentEcsFieldResolvers.Resolvers; AuditdEcsFields?: AuditdEcsFieldsResolvers.Resolvers; AuditdData?: AuditdDataResolvers.Resolvers; Summary?: SummaryResolvers.Resolvers; diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/README.md b/x-pack/plugins/security_solution/server/lib/detection_engine/README.md index 7a48df72d6bdec..fa0716ec082858 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/README.md +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/README.md @@ -59,7 +59,7 @@ which will: - Delete any existing alerts you have - Delete any existing alert tasks you have - Delete any existing signal mapping, policies, and template, you might have previously had. -- Add the latest signal index and its mappings using your settings from `kibana.dev.yml` environment variable of `xpack.security_solution.signalsIndex`. +- Add the latest signal index and its mappings using your settings from `kibana.dev.yml` environment variable of `xpack.securitySolution.signalsIndex`. - Posts the sample rule from `./rules/queries/query_with_rule_id.json` - The sample rule checks for root or admin every 5 minutes and reports that as a signal if it is a positive hit @@ -171,6 +171,6 @@ go about doing so. To test out the functionality of large lists with rules, the user will need to import a list and post a rule with a reference to that exception list. The following outlines an example using the sample json rule provided in the repo. * First, set the appropriate env var in order to enable exceptions features`export ELASTIC_XPACK_SECURITY_SOLUTION_LISTS_FEATURE=true` and `export ELASTIC_XPACK_SECURITY_SOLUTION_EXCEPTIONS_LISTS=true` and start kibana -* Second, import a list of ips from a file called `ci-badguys.txt`. The command should look like this: +* Second, import a list of ips from a file called `ci-badguys.txt`. The command should look like this: `cd $HOME/kibana/x-pack/plugins/lists/server/scripts && ./import_list_items_by_filename.sh ip ~/ci-badguys.txt` * Then, from the detection engine scripts folder (`cd kibana/x-pack/plugins/security_solution/server/lib/detection_engine/scripts`) run `./post_rule.sh rules/queries/lists/query_with_list_plugin.json` diff --git a/x-pack/plugins/security_solution/server/lib/ecs_fields/index.ts b/x-pack/plugins/security_solution/server/lib/ecs_fields/index.ts index f2662c79d33937..ff474c4a841f62 100644 --- a/x-pack/plugins/security_solution/server/lib/ecs_fields/index.ts +++ b/x-pack/plugins/security_solution/server/lib/ecs_fields/index.ts @@ -76,12 +76,17 @@ export const processFieldsMap: Readonly> = { 'process.name': 'process.name', 'process.ppid': 'process.ppid', 'process.args': 'process.args', + 'process.entity_id': 'process.entity_id', 'process.executable': 'process.executable', 'process.title': 'process.title', 'process.thread': 'process.thread', 'process.working_directory': 'process.working_directory', }; +export const agentFieldsMap: Readonly> = { + 'agent.type': 'agent.type', +}; + export const userFieldsMap: Readonly> = { 'user.domain': 'user.domain', 'user.id': 'user.id', @@ -327,6 +332,7 @@ export const eventFieldsMap: Readonly> = { timestamp: '@timestamp', '@timestamp': '@timestamp', message: 'message', + ...{ ...agentFieldsMap }, ...{ ...auditdMap }, ...{ ...destinationFieldsMap }, ...{ ...dnsFieldsMap }, diff --git a/x-pack/plugins/security_solution/server/lib/timeline/pick_saved_timeline.ts b/x-pack/plugins/security_solution/server/lib/timeline/pick_saved_timeline.ts index 281726d488abe8..68e7f8d5e6fe19 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/pick_saved_timeline.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/pick_saved_timeline.ts @@ -4,7 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ -import uuid from 'uuid'; import { isEmpty } from 'lodash/fp'; import { AuthenticatedUser } from '../../../../security/common/model'; import { UNAUTHENTICATED_USER } from '../../../common/constants'; @@ -28,18 +27,13 @@ export const pickSavedTimeline = ( savedTimeline.updatedBy = userInfo?.username ?? UNAUTHENTICATED_USER; } - if (savedTimeline.timelineType === TimelineType.template) { - if (savedTimeline.templateTimelineId == null) { - // create template timeline - savedTimeline.templateTimelineId = uuid.v4(); - savedTimeline.templateTimelineVersion = 1; - } else { - // update template timeline - if (savedTimeline.templateTimelineVersion != null) { - savedTimeline.templateTimelineVersion = savedTimeline.templateTimelineVersion + 1; - } - } - } else { + if (savedTimeline.status === TimelineStatus.draft) { + savedTimeline.status = !isEmpty(savedTimeline.title) + ? TimelineStatus.active + : TimelineStatus.draft; + } + + if (savedTimeline.timelineType === TimelineType.default) { savedTimeline.timelineType = savedTimeline.timelineType ?? TimelineType.default; savedTimeline.templateTimelineId = null; savedTimeline.templateTimelineVersion = null; diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/README.md b/x-pack/plugins/security_solution/server/lib/timeline/routes/README.md index 2c5547e39fc4e5..ee57d5bb3d0314 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/README.md +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/README.md @@ -323,4 +323,301 @@ kbn-version: 8.0.0 "timelineId":"f5a4bd10-83cd-11ea-bf78-0547a65f1281", // This is a must as well "version":"Wzg2LDFd" // Please provide the existing timeline version } -``` \ No newline at end of file +``` + +## Export timeline api + +#### POST /api/timeline/_export + +##### Authorization + +Type: Basic Auth + +username: Your Kibana username + +password: Your Kibana password + + + + +##### Request header + +``` + +Content-Type: application/json + +kbn-version: 8.0.0 + +``` + +##### Request param + +``` +file_name: ${filename}.ndjson +``` + +##### Request body +```json +{ + ids: [ + ${timelineId} + ] +} +``` + +## Import timeline api + +#### POST /api/timeline/_import + +##### Authorization + +Type: Basic Auth + +username: Your Kibana username + +password: Your Kibana password + + + + +##### Request header + +``` + +Content-Type: application/json + +kbn-version: 8.0.0 + +``` + +##### Request body + +``` +{ + file: sample.ndjson +} +``` + + +(each json in the file should match this format) +example: +``` +{"savedObjectId":"a3002fd0-781b-11ea-85e4-df9002f1452c","version":"WzIzLDFd","columns":[{"columnHeaderType":"not-filtered","id":"@timestamp"},{"columnHeaderType":"not-filtered","id":"message"},{"columnHeaderType":"not-filtered","id":"event.category"},{"columnHeaderType":"not-filtered","id":"event.action"},{"columnHeaderType":"not-filtered","id":"host.name"},{"columnHeaderType":"not-filtered","id":"source.ip"},{"columnHeaderType":"not-filtered","id":"destination.ip"},{"columnHeaderType":"not-filtered","id":"user.name"}],"dataProviders":[],"description":"tes description","eventType":"all","filters":[{"meta":{"field":null,"negate":false,"alias":null,"disabled":false,"params":"{\"query\":\"MacBook-Pro-de-Gloria.local\"}","type":"phrase","key":"host.name"},"query":"{\"match_phrase\":{\"host.name\":\"MacBook-Pro-de-Gloria.local\"}}","missing":null,"exists":null,"match_all":null,"range":null,"script":null}],"kqlMode":"filter","kqlQuery":{"filterQuery":{"serializedQuery":"{\"bool\":{\"should\":[{\"exists\":{\"field\":\"host.name\"}}],\"minimum_should_match\":1}}","kuery":{"expression":"host.name: *","kind":"kuery"}}},"title":"Test","dateRange":{"start":1585227005527,"end":1585313405527},"savedQueryId":null,"sort":{"columnId":"@timestamp","sortDirection":"desc"},"created":1586187068132,"createdBy":"angela","updated":1586187068132,"updatedBy":"angela","eventNotes":[],"globalNotes":[{"noteId":"a3b4d9d0-781b-11ea-85e4-df9002f1452c","version":"WzI1LDFd","note":"this is a note","timelineId":"a3002fd0-781b-11ea-85e4-df9002f1452c","created":1586187069313,"createdBy":"angela","updated":1586187069313,"updatedBy":"angela"}],"pinnedEventIds":[]} +``` + +##### Response +``` +{"success":true,"success_count":1,"errors":[]} +``` + +## Get draft timeline api + +#### GET /api/timeline/_draft + +##### Authorization + +Type: Basic Auth + +username: Your Kibana username + +password: Your Kibana password + + +##### Request header + +``` + +Content-Type: application/json + +kbn-version: 8.0.0 + +``` + +##### Request param +``` +timelineType: `default` or `template` +``` + +##### Response +```json +{ + "data": { + "persistTimeline": { + "timeline": { + "savedObjectId": "ababbd90-99de-11ea-8446-1d7fd9f03ebf", + "version": "WzM2MiwzXQ==", + "columns": [ + { + "columnHeaderType": "not-filtered", + "id": "@timestamp" + }, + { + "columnHeaderType": "not-filtered", + "id": "message" + }, + { + "columnHeaderType": "not-filtered", + "id": "event.category" + }, + { + "columnHeaderType": "not-filtered", + "id": "event.action" + }, + { + "columnHeaderType": "not-filtered", + "id": "host.name" + }, + { + "columnHeaderType": "not-filtered", + "id": "source.ip" + }, + { + "columnHeaderType": "not-filtered", + "id": "destination.ip" + }, + { + "columnHeaderType": "not-filtered", + "id": "user.name" + } + ], + "dataProviders": [], + "description": "", + "eventType": "all", + "filters": [], + "kqlMode": "filter", + "timelineType": "default", + "kqlQuery": { + "filterQuery": null + }, + "title": "", + "sort": { + "columnId": "@timestamp", + "sortDirection": "desc" + }, + "status": "draft", + "created": 1589899222908, + "createdBy": "casetester", + "updated": 1589899222908, + "updatedBy": "casetester", + "templateTimelineId": null, + "templateTimelineVersion": null, + "favorite": [], + "eventIdToNoteIds": [], + "noteIds": [], + "notes": [], + "pinnedEventIds": [], + "pinnedEventsSaveObject": [] + } + } + } +} +``` + +## Create draft timeline api + +#### POST /api/timeline/_draft + +##### Authorization + +Type: Basic Auth + +username: Your Kibana username + +password: Your Kibana password + + +##### Request header + +``` + +Content-Type: application/json + +kbn-version: 8.0.0 + +``` + +##### Request body + +```json +{ + "timelineType": "default" or "template" +} +``` + +##### Response +```json +{ + "data": { + "persistTimeline": { + "timeline": { + "savedObjectId": "ababbd90-99de-11ea-8446-1d7fd9f03ebf", + "version": "WzQyMywzXQ==", + "columns": [ + { + "columnHeaderType": "not-filtered", + "id": "@timestamp" + }, + { + "columnHeaderType": "not-filtered", + "id": "message" + }, + { + "columnHeaderType": "not-filtered", + "id": "event.category" + }, + { + "columnHeaderType": "not-filtered", + "id": "event.action" + }, + { + "columnHeaderType": "not-filtered", + "id": "host.name" + }, + { + "columnHeaderType": "not-filtered", + "id": "source.ip" + }, + { + "columnHeaderType": "not-filtered", + "id": "destination.ip" + }, + { + "columnHeaderType": "not-filtered", + "id": "user.name" + } + ], + "dataProviders": [], + "description": "", + "eventType": "all", + "filters": [], + "kqlMode": "filter", + "timelineType": "default", + "kqlQuery": { + "filterQuery": null + }, + "title": "", + "sort": { + "columnId": "@timestamp", + "sortDirection": "desc" + }, + "status": "draft", + "created": 1589903306582, + "createdBy": "casetester", + "updated": 1589903306582, + "updatedBy": "casetester", + "templateTimelineId": null, + "templateTimelineVersion": null, + "favorite": [], + "eventIdToNoteIds": [], + "noteIds": [], + "notes": [], + "pinnedEventIds": [], + "pinnedEventsSaveObject": [] + } + } + } +} +``` + + + diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/__mocks__/import_timelines.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/__mocks__/import_timelines.ts index 7180f06d853bef..adfdf831f22cf4 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/__mocks__/import_timelines.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/__mocks__/import_timelines.ts @@ -138,6 +138,7 @@ export const mockGetTimelineValue = { kqlMode: 'filter', kqlQuery: { filterQuery: [] }, title: 'My duplicate timeline', + timelineType: TimelineType.default, dateRange: { start: 1584523907294, end: 1584610307294 }, savedQueryId: null, sort: { columnId: '@timestamp', sortDirection: 'desc' }, @@ -145,17 +146,25 @@ export const mockGetTimelineValue = { createdBy: 'angela', updated: 1584868346013, updatedBy: 'angela', - noteIds: [], + noteIds: ['d2649d40-6bc5-xxxx-0000-5db0048c6086'], pinnedEventIds: ['k-gi8nABm-sIqJ_scOoS'], }; export const mockGetTemplateTimelineValue = { ...mockGetTimelineValue, timelineType: TimelineType.template, - templateTimelineId: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', + templateTimelineId: '79deb4c0-6bc1-0000-0000-f5341fb7a189', templateTimelineVersion: 1, }; +export const mockUniqueParsedTemplateTimelineObjects = [ + { ...mockUniqueParsedObjects[0], ...mockGetTemplateTimelineValue, templateTimelineVersion: 2 }, +]; + +export const mockParsedTemplateTimelineObjects = [ + { ...mockParsedObjects[0], ...mockGetTemplateTimelineValue }, +]; + export const mockGetDraftTimelineValue = { savedObjectId: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', version: 'WzEyMjUsMV0=', @@ -195,8 +204,51 @@ export const mockParsedTimelineObject = omit( mockUniqueParsedObjects[0] ); +export const mockParsedTemplateTimelineObject = omit( + [ + 'globalNotes', + 'eventNotes', + 'pinnedEventIds', + 'version', + 'savedObjectId', + 'created', + 'createdBy', + 'updated', + 'updatedBy', + ], + mockUniqueParsedTemplateTimelineObjects[0] +); + export const mockGetCurrentUser = { user: { username: 'mockUser', }, }; + +export const mockCreatedTimeline = { + savedObjectId: '79deb4c0-1111-1111-1111-f5341fb7a189', + version: 'WzEyMjUsMV0=', + columns: [], + dataProviders: [], + description: 'description', + eventType: 'all', + filters: [], + kqlMode: 'filter', + kqlQuery: { filterQuery: [] }, + title: 'My duplicate timeline', + dateRange: { start: 1584523907294, end: 1584610307294 }, + savedQueryId: null, + sort: { columnId: '@timestamp', sortDirection: 'desc' }, + created: 1584828930463, + createdBy: 'angela', + updated: 1584868346013, + updatedBy: 'angela', + eventNotes: [], + globalNotes: [], + pinnedEventIds: [], +}; + +export const mockCreatedTemplateTimeline = { + ...mockCreatedTimeline, + ...mockGetTemplateTimelineValue, +}; diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/__mocks__/request_responses.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/__mocks__/request_responses.ts index 470ba1a853b585..9afe5ad533324f 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/__mocks__/request_responses.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/__mocks__/request_responses.ts @@ -4,15 +4,18 @@ * you may not use this file except in compliance with the Elastic License. */ import * as rt from 'io-ts'; +import stream from 'stream'; + import { TIMELINE_DRAFT_URL, TIMELINE_EXPORT_URL, TIMELINE_IMPORT_URL, TIMELINE_URL, } from '../../../../../common/constants'; -import stream from 'stream'; -import { requestMock } from '../../../detection_engine/routes/__mocks__'; import { SavedTimeline, TimelineType, TimelineStatus } from '../../../../../common/types/timeline'; + +import { requestMock } from '../../../detection_engine/routes/__mocks__'; + import { updateTimelineSchema } from '../schemas/update_timelines_schema'; import { createTimelineSchema } from '../schemas/create_timelines_schema'; @@ -23,7 +26,6 @@ export const getExportTimelinesRequest = () => path: TIMELINE_EXPORT_URL, query: { file_name: 'mock_export_timeline.ndjson', - exclude_export_details: 'false', }, body: { ids: ['f0e58720-57b6-11ea-b88d-3f1a31716be8', '890b8ae0-57df-11ea-a7c9-3976b7f1cb37'], @@ -60,7 +62,7 @@ export const inputTimeline: SavedTimeline = { title: 't', timelineType: TimelineType.default, templateTimelineId: null, - templateTimelineVersion: null, + templateTimelineVersion: 1, dateRange: { start: 1585227005527, end: 1585313405527 }, savedQueryId: null, sort: { columnId: '@timestamp', sortDirection: 'desc' }, @@ -69,7 +71,7 @@ export const inputTimeline: SavedTimeline = { export const inputTemplateTimeline = { ...inputTimeline, timelineType: TimelineType.template, - templateTimelineId: null, + templateTimelineId: '79deb4c0-6bc1-11ea-inpt-templatea189', templateTimelineVersion: null, }; @@ -91,11 +93,11 @@ export const createDraftTimelineWithoutTimelineId = { }; export const createTemplateTimelineWithoutTimelineId = { - templateTimelineId: null, timeline: inputTemplateTimeline, timelineId: null, version: null, timelineType: TimelineType.template, + status: TimelineStatus.active, }; export const createTimelineWithTimelineId = { @@ -111,7 +113,6 @@ export const createDraftTimelineWithTimelineId = { export const createTemplateTimelineWithTimelineId = { ...createTemplateTimelineWithoutTimelineId, timelineId: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', - templateTimelineId: 'existing template timeline id', }; export const updateTimelineWithTimelineId = { @@ -123,7 +124,7 @@ export const updateTimelineWithTimelineId = { export const updateTemplateTimelineWithTimelineId = { timeline: { ...inputTemplateTimeline, - templateTimelineId: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', + templateTimelineId: '79deb4c0-6bc1-0000-0000-f5341fb7a189', templateTimelineVersion: 1, }, timelineId: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/clean_draft_timelines_route.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/clean_draft_timelines_route.ts index 9ad50b8f2266cd..8cabd84a965b75 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/clean_draft_timelines_route.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/clean_draft_timelines_route.ts @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ +import uuid from 'uuid'; import { IRouter } from '../../../../../../../src/core/server'; import { ConfigType } from '../../..'; import { transformError, buildSiemResponse } from '../../detection_engine/routes/utils'; @@ -14,6 +15,7 @@ import { buildRouteValidation } from '../../../utils/build_validation/route_vali import { getDraftTimeline, resetTimeline, getTimeline, persistTimeline } from '../saved_object'; import { draftTimelineDefaults } from '../default_timeline'; import { cleanDraftTimelineSchema } from './schemas/clean_draft_timelines_schema'; +import { TimelineType } from '../../../../common/types/timeline'; export const cleanDraftTimelinesRoute = ( router: IRouter, @@ -60,10 +62,18 @@ export const cleanDraftTimelinesRoute = ( }, }); } + const templateTimelineData = + request.body.timelineType === TimelineType.template + ? { + timelineType: request.body.timelineType, + templateTimelineId: uuid.v4(), + templateTimelineVersion: 1, + } + : {}; const newTimelineResponse = await persistTimeline(frameworkRequest, null, null, { ...draftTimelineDefaults, - timelineType: request.body.timelineType, + ...templateTimelineData, }); if (newTimelineResponse.code === 200) { diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/create_timelines_route.test.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/create_timelines_route.test.ts index 70ee1532395a5d..f5345c3dce2223 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/create_timelines_route.test.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/create_timelines_route.test.ts @@ -23,6 +23,7 @@ import { createTimelineWithTimelineId, createTemplateTimelineWithoutTimelineId, createTemplateTimelineWithTimelineId, + updateTemplateTimelineWithTimelineId, } from './__mocks__/request_responses'; import { CREATE_TEMPLATE_TIMELINE_ERROR_MESSAGE, @@ -34,6 +35,7 @@ describe('create timelines', () => { let securitySetup: SecurityPluginSetup; let { context } = requestContextMock.createTools(); let mockGetTimeline: jest.Mock; + let mockGetTemplateTimeline: jest.Mock; let mockPersistTimeline: jest.Mock; let mockPersistPinnedEventOnTimeline: jest.Mock; let mockPersistNote: jest.Mock; @@ -55,6 +57,7 @@ describe('create timelines', () => { } as unknown) as SecurityPluginSetup; mockGetTimeline = jest.fn(); + mockGetTemplateTimeline = jest.fn(); mockPersistTimeline = jest.fn(); mockPersistPinnedEventOnTimeline = jest.fn(); mockPersistNote = jest.fn(); @@ -231,11 +234,14 @@ describe('create timelines', () => { }); }); - describe('Import a template timeline already exist', () => { + describe('Create a template timeline already exist', () => { beforeEach(() => { jest.doMock('../saved_object', () => { return { getTimeline: mockGetTimeline.mockReturnValue(mockGetTemplateTimelineValue), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue({ + timeline: [mockGetTemplateTimelineValue], + }), persistTimeline: mockPersistTimeline, }; }); @@ -259,7 +265,7 @@ describe('create timelines', () => { test('returns error message', async () => { const response = await server.inject( - getCreateTimelinesRequest(createTemplateTimelineWithTimelineId), + getCreateTimelinesRequest(updateTemplateTimelineWithTimelineId), context ); expect(response.body).toEqual({ diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/create_timelines_route.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/create_timelines_route.ts index d92f2ce0764c5c..60ddaea367aedd 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/create_timelines_route.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/create_timelines_route.ts @@ -6,7 +6,6 @@ import { IRouter } from '../../../../../../../src/core/server'; import { TIMELINE_URL } from '../../../../common/constants'; -import { TimelineType } from '../../../../common/types/timeline'; import { ConfigType } from '../../..'; import { SetupPlugins } from '../../../plugin'; @@ -15,14 +14,12 @@ import { buildRouteValidation } from '../../../utils/build_validation/route_vali import { transformError, buildSiemResponse } from '../../detection_engine/routes/utils'; import { createTimelineSchema } from './schemas/create_timelines_schema'; -import { buildFrameworkRequest } from './utils/common'; import { - createTimelines, - getTimeline, - getTemplateTimeline, - CREATE_TEMPLATE_TIMELINE_ERROR_MESSAGE, - CREATE_TIMELINE_ERROR_MESSAGE, -} from './utils/create_timelines'; + buildFrameworkRequest, + CompareTimelinesStatus, + TimelineStatusActions, +} from './utils/common'; +import { createTimelines } from './utils/create_timelines'; export const createTimelinesRoute = ( router: IRouter, @@ -36,7 +33,7 @@ export const createTimelinesRoute = ( body: buildRouteValidation(createTimelineSchema), }, options: { - tags: ['access:securitySolution'], + tags: ['access:siem'], }, }, async (context, request, response) => { @@ -46,40 +43,54 @@ export const createTimelinesRoute = ( const frameworkRequest = await buildFrameworkRequest(context, security, request); const { timelineId, timeline, version } = request.body; - const { templateTimelineId, timelineType } = timeline; - const isHandlingTemplateTimeline = timelineType === TimelineType.template; - - const existTimeline = - timelineId != null ? await getTimeline(frameworkRequest, timelineId) : null; - const existTemplateTimeline = - templateTimelineId != null - ? await getTemplateTimeline(frameworkRequest, templateTimelineId) - : null; + const { + templateTimelineId, + templateTimelineVersion, + timelineType, + title, + status, + } = timeline; + const compareTimelinesStatus = new CompareTimelinesStatus({ + status, + title, + timelineType, + timelineInput: { + id: timelineId, + version, + }, + templateTimelineInput: { + id: templateTimelineId, + version: templateTimelineVersion, + }, + frameworkRequest, + }); + await compareTimelinesStatus.init(); - if ( - (!isHandlingTemplateTimeline && existTimeline != null) || - (isHandlingTemplateTimeline && (existTemplateTimeline != null || existTimeline != null)) - ) { - return siemResponse.error({ - body: isHandlingTemplateTimeline - ? CREATE_TEMPLATE_TIMELINE_ERROR_MESSAGE - : CREATE_TIMELINE_ERROR_MESSAGE, - statusCode: 405, + // Create timeline + if (compareTimelinesStatus.isCreatable) { + const newTimeline = await createTimelines({ + frameworkRequest, + timeline, + timelineVersion: version, }); - } - // Create timeline - const newTimeline = await createTimelines(frameworkRequest, timeline, null, version); - return response.ok({ - body: { - data: { - persistTimeline: newTimeline, + return response.ok({ + body: { + data: { + persistTimeline: newTimeline, + }, }, - }, - }); + }); + } else { + return siemResponse.error( + compareTimelinesStatus.checkIsFailureCases(TimelineStatusActions.create) || { + statusCode: 405, + body: 'update timeline error', + } + ); + } } catch (err) { const error = transformError(err); - return siemResponse.error({ body: error.message, statusCode: error.statusCode, diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/export_timelines_route.test.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/export_timelines_route.test.ts index 2bccb7c393837b..c66bf7b192c620 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/export_timelines_route.test.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/export_timelines_route.test.ts @@ -98,7 +98,7 @@ describe('export timelines', () => { const result = server.validate(request); expect(result.badRequest.mock.calls[1][0]).toEqual( - 'Invalid value "undefined" supplied to "file_name",Invalid value "undefined" supplied to "exclude_export_details",Invalid value "undefined" supplied to "exclude_export_details"' + 'Invalid value "undefined" supplied to "file_name"' ); }); }); diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/import_timelines_route.test.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/import_timelines_route.test.ts index 48e22f6af2a7b8..15fb8f3411cfab 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/import_timelines_route.test.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/import_timelines_route.test.ts @@ -12,7 +12,7 @@ import { createMockConfig, } from '../../detection_engine/routes/__mocks__'; import { TIMELINE_EXPORT_URL } from '../../../../common/constants'; -import { TimelineStatus } from '../../../../common/types/timeline'; +import { TimelineStatus, TimelineType } from '../../../../common/types/timeline'; import { SecurityPluginSetup } from '../../../../../../plugins/security/server'; import { @@ -22,7 +22,19 @@ import { mockGetCurrentUser, mockGetTimelineValue, mockParsedTimelineObject, + mockParsedTemplateTimelineObjects, + mockUniqueParsedTemplateTimelineObjects, + mockParsedTemplateTimelineObject, + mockCreatedTemplateTimeline, + mockGetTemplateTimelineValue, + mockCreatedTimeline, } from './__mocks__/import_timelines'; +import { + TEMPLATE_TIMELINE_VERSION_CONFLICT_MESSAGE, + EMPTY_TITLE_ERROR_MESSAGE, + NOT_ALLOW_UPDATE_STATUS_ERROR_MESSAGE, + NOT_ALLOW_UPDATE_TIMELINE_TYPE_ERROR_MESSAGE, +} from './utils/failure_cases'; describe('import timelines', () => { let server: ReturnType; @@ -35,8 +47,7 @@ describe('import timelines', () => { let mockPersistPinnedEventOnTimeline: jest.Mock; let mockPersistNote: jest.Mock; let mockGetTupleDuplicateErrorsAndUniqueTimeline: jest.Mock; - const newTimelineSavedObjectId = '79deb4c0-6bc1-11ea-9999-f5341fb7a189'; - const newTimelineVersion = '9999'; + beforeEach(() => { jest.resetModules(); jest.resetAllMocks(); @@ -90,7 +101,7 @@ describe('import timelines', () => { getTimeline: mockGetTimeline.mockReturnValue(null), getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue(null), persistTimeline: mockPersistTimeline.mockReturnValue({ - timeline: { savedObjectId: newTimelineSavedObjectId, version: newTimelineVersion }, + timeline: mockCreatedTimeline, }), }; }); @@ -139,19 +150,38 @@ describe('import timelines', () => { test('should Create a new timeline savedObject with given timeline', async () => { const mockRequest = getImportTimelinesRequest(); await server.inject(mockRequest, context); - expect(mockPersistTimeline.mock.calls[0][3]).toEqual(mockParsedTimelineObject); + expect(mockPersistTimeline.mock.calls[0][3]).toEqual({ + ...mockParsedTimelineObject, + status: TimelineStatus.active, + templateTimelineId: null, + templateTimelineVersion: null, + }); }); - test('should Create a new timeline savedObject with given draft timeline', async () => { + test('should throw error if given an untitle timeline', async () => { mockGetTupleDuplicateErrorsAndUniqueTimeline.mockReturnValue([ mockDuplicateIdErrors, - [{ ...mockUniqueParsedObjects[0], status: TimelineStatus.draft }], + [ + { + ...mockUniqueParsedObjects[0], + title: '', + }, + ], ]); const mockRequest = getImportTimelinesRequest(); - await server.inject(mockRequest, context); - expect(mockPersistTimeline.mock.calls[0][3]).toEqual({ - ...mockParsedTimelineObject, - status: TimelineStatus.active, + const response = await server.inject(mockRequest, context); + expect(response.body).toEqual({ + success: false, + success_count: 0, + errors: [ + { + id: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', + error: { + status_code: 409, + message: EMPTY_TITLE_ERROR_MESSAGE, + }, + }, + ], }); }); @@ -178,7 +208,9 @@ describe('import timelines', () => { test('should Create a new pinned event with new timelineSavedObjectId', async () => { const mockRequest = getImportTimelinesRequest(); await server.inject(mockRequest, context); - expect(mockPersistPinnedEventOnTimeline.mock.calls[0][3]).toEqual(newTimelineSavedObjectId); + expect(mockPersistPinnedEventOnTimeline.mock.calls[0][3]).toEqual( + mockCreatedTimeline.savedObjectId + ); }); test('should Create notes', async () => { @@ -202,7 +234,7 @@ describe('import timelines', () => { test('should provide note content when Creating notes for a timeline', async () => { const mockRequest = getImportTimelinesRequest(); await server.inject(mockRequest, context); - expect(mockPersistNote.mock.calls[0][2]).toEqual(newTimelineVersion); + expect(mockPersistNote.mock.calls[0][2]).toEqual(mockCreatedTimeline.version); }); test('should provide new notes when Creating notes for a timeline', async () => { @@ -211,17 +243,17 @@ describe('import timelines', () => { expect(mockPersistNote.mock.calls[0][3]).toEqual({ eventId: undefined, note: mockUniqueParsedObjects[0].globalNotes[0].note, - timelineId: newTimelineSavedObjectId, + timelineId: mockCreatedTimeline.savedObjectId, }); expect(mockPersistNote.mock.calls[1][3]).toEqual({ eventId: mockUniqueParsedObjects[0].eventNotes[0].eventId, note: mockUniqueParsedObjects[0].eventNotes[0].note, - timelineId: newTimelineSavedObjectId, + timelineId: mockCreatedTimeline.savedObjectId, }); expect(mockPersistNote.mock.calls[2][3]).toEqual({ eventId: mockUniqueParsedObjects[0].eventNotes[1].eventId, note: mockUniqueParsedObjects[0].eventNotes[1].note, - timelineId: newTimelineSavedObjectId, + timelineId: mockCreatedTimeline.savedObjectId, }); }); @@ -268,7 +300,458 @@ describe('import timelines', () => { id: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', error: { status_code: 409, - message: `timeline_id: "79deb4c0-6bc1-11ea-a90b-f5341fb7a189" already exists`, + message: `savedObjectId: "79deb4c0-6bc1-11ea-a90b-f5341fb7a189" already exists`, + }, + }, + ], + }); + }); + + test('should throw error if given an untitle timeline', async () => { + mockGetTupleDuplicateErrorsAndUniqueTimeline.mockReturnValue([ + mockDuplicateIdErrors, + [ + { + ...mockUniqueParsedObjects[0], + title: '', + }, + ], + ]); + const mockRequest = getImportTimelinesRequest(); + const response = await server.inject(mockRequest, context); + expect(response.body).toEqual({ + success: false, + success_count: 0, + errors: [ + { + id: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', + error: { + status_code: 409, + message: EMPTY_TITLE_ERROR_MESSAGE, + }, + }, + ], + }); + }); + + test('should throw error if timelineType updated', async () => { + mockGetTupleDuplicateErrorsAndUniqueTimeline.mockReturnValue([ + mockDuplicateIdErrors, + [ + { + ...mockGetTimelineValue, + timelineType: TimelineType.template, + }, + ], + ]); + const mockRequest = getImportTimelinesRequest(); + const response = await server.inject(mockRequest, context); + expect(response.body).toEqual({ + success: false, + success_count: 0, + errors: [ + { + id: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', + error: { + status_code: 409, + message: NOT_ALLOW_UPDATE_TIMELINE_TYPE_ERROR_MESSAGE, + }, + }, + ], + }); + }); + }); + + describe('request validation', () => { + beforeEach(() => { + jest.doMock('../saved_object', () => { + return { + getTimeline: mockGetTimeline.mockReturnValue(null), + persistTimeline: mockPersistTimeline.mockReturnValue({ + timeline: { savedObjectId: '79deb4c0-6bc1-11ea-9999-f5341fb7a189' }, + }), + }; + }); + + jest.doMock('../../pinned_event/saved_object', () => { + return { + persistPinnedEventOnTimeline: mockPersistPinnedEventOnTimeline.mockReturnValue( + new Error('Test error') + ), + }; + }); + + jest.doMock('../../note/saved_object', () => { + return { + persistNote: mockPersistNote, + }; + }); + }); + test('disallows invalid query', async () => { + request = requestMock.create({ + method: 'post', + path: TIMELINE_EXPORT_URL, + body: { id: 'someId' }, + }); + const importTimelinesRoute = jest.requireActual('./import_timelines_route') + .importTimelinesRoute; + + importTimelinesRoute(server.router, createMockConfig(), securitySetup); + const result = server.validate(request); + + expect(result.badRequest).toHaveBeenCalledWith( + [ + 'Invalid value "undefined" supplied to "file"', + 'Invalid value "undefined" supplied to "file"', + ].join(',') + ); + }); + }); +}); + +describe('import template timelines', () => { + let server: ReturnType; + let request: ReturnType; + let securitySetup: SecurityPluginSetup; + let { context } = requestContextMock.createTools(); + let mockGetTimeline: jest.Mock; + let mockGetTemplateTimeline: jest.Mock; + let mockPersistTimeline: jest.Mock; + let mockPersistPinnedEventOnTimeline: jest.Mock; + let mockPersistNote: jest.Mock; + let mockGetTupleDuplicateErrorsAndUniqueTimeline: jest.Mock; + const mockNewTemplateTimelineId = 'new templateTimelineId'; + beforeEach(() => { + jest.resetModules(); + jest.resetAllMocks(); + jest.restoreAllMocks(); + jest.clearAllMocks(); + + server = serverMock.create(); + context = requestContextMock.createTools().context; + + securitySetup = ({ + authc: { + getCurrentUser: jest.fn().mockReturnValue(mockGetCurrentUser), + }, + authz: {}, + } as unknown) as SecurityPluginSetup; + + mockGetTimeline = jest.fn(); + mockGetTemplateTimeline = jest.fn(); + mockPersistTimeline = jest.fn(); + mockPersistPinnedEventOnTimeline = jest.fn(); + mockPersistNote = jest.fn(); + mockGetTupleDuplicateErrorsAndUniqueTimeline = jest.fn(); + + jest.doMock('../create_timelines_stream_from_ndjson', () => { + return { + createTimelinesStreamFromNdJson: jest + .fn() + .mockReturnValue(mockParsedTemplateTimelineObjects), + }; + }); + + jest.doMock('../../../../../../../src/legacy/utils', () => { + return { + createPromiseFromStreams: jest.fn().mockReturnValue(mockParsedTemplateTimelineObjects), + }; + }); + + jest.doMock('./utils/import_timelines', () => { + const originalModule = jest.requireActual('./utils/import_timelines'); + return { + ...originalModule, + getTupleDuplicateErrorsAndUniqueTimeline: mockGetTupleDuplicateErrorsAndUniqueTimeline.mockReturnValue( + [mockDuplicateIdErrors, mockUniqueParsedTemplateTimelineObjects] + ), + }; + }); + + jest.doMock('uuid', () => ({ + v4: jest.fn().mockReturnValue(mockNewTemplateTimelineId), + })); + }); + + describe('Import a new template timeline', () => { + beforeEach(() => { + jest.doMock('../saved_object', () => { + return { + getTimeline: mockGetTimeline.mockReturnValue(null), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue(null), + persistTimeline: mockPersistTimeline.mockReturnValue({ + timeline: mockCreatedTemplateTimeline, + }), + }; + }); + + jest.doMock('../../pinned_event/saved_object', () => { + return { + persistPinnedEventOnTimeline: mockPersistPinnedEventOnTimeline, + }; + }); + + jest.doMock('../../note/saved_object', () => { + return { + persistNote: mockPersistNote, + }; + }); + + const importTimelinesRoute = jest.requireActual('./import_timelines_route') + .importTimelinesRoute; + importTimelinesRoute(server.router, createMockConfig(), securitySetup); + }); + + test('should use given timelineId to check if the timeline savedObject already exist', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockGetTimeline.mock.calls[0][1]).toEqual( + mockUniqueParsedTemplateTimelineObjects[0].savedObjectId + ); + }); + + test('should use given templateTimelineId to check if the timeline savedObject already exist', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockGetTemplateTimeline.mock.calls[0][1]).toEqual( + mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId + ); + }); + + test('should Create a new timeline savedObject', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistTimeline).toHaveBeenCalled(); + }); + + test('should Create a new timeline savedObject without timelineId', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistTimeline.mock.calls[0][1]).toBeNull(); + }); + + test('should Create a new timeline savedObject without timeline version', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistTimeline.mock.calls[0][2]).toBeNull(); + }); + + test('should Create a new timeline savedObject witn given timeline and skip the omitted fields', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistTimeline.mock.calls[0][3]).toEqual({ + ...mockParsedTemplateTimelineObject, + status: TimelineStatus.active, + }); + }); + + test('should NOT Create new pinned events', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistPinnedEventOnTimeline).not.toHaveBeenCalled(); + }); + + test('should provide no noteSavedObjectId when Creating notes for a timeline', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistNote.mock.calls[0][1]).toBeNull(); + }); + + test('should provide new timeline version when Creating notes for a timeline', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistNote.mock.calls[0][2]).toEqual(mockCreatedTemplateTimeline.version); + }); + + test('should exclude event notes when creating notes', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistNote.mock.calls[0][3]).toEqual({ + eventId: undefined, + note: mockUniqueParsedTemplateTimelineObjects[0].globalNotes[0].note, + timelineId: mockCreatedTemplateTimeline.savedObjectId, + }); + }); + + test('returns 200 when import timeline successfully', async () => { + const response = await server.inject(getImportTimelinesRequest(), context); + expect(response.status).toEqual(200); + }); + + test('should assign a templateTimeline Id automatically if not given one', async () => { + mockGetTupleDuplicateErrorsAndUniqueTimeline.mockReturnValue([ + mockDuplicateIdErrors, + [ + { + ...mockUniqueParsedTemplateTimelineObjects[0], + templateTimelineId: null, + }, + ], + ]); + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistTimeline.mock.calls[0][3].templateTimelineId).toEqual( + mockNewTemplateTimelineId + ); + }); + }); + + describe('Import a template timeline already exist', () => { + beforeEach(() => { + jest.doMock('../saved_object', () => { + return { + getTimeline: mockGetTimeline.mockReturnValue(mockGetTemplateTimelineValue), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue({ + timeline: [mockGetTemplateTimelineValue], + }), + persistTimeline: mockPersistTimeline.mockReturnValue({ + timeline: mockCreatedTemplateTimeline, + }), + }; + }); + + jest.doMock('../../pinned_event/saved_object', () => { + return { + persistPinnedEventOnTimeline: mockPersistPinnedEventOnTimeline, + }; + }); + + jest.doMock('../../note/saved_object', () => { + return { + persistNote: mockPersistNote, + }; + }); + + const importTimelinesRoute = jest.requireActual('./import_timelines_route') + .importTimelinesRoute; + importTimelinesRoute(server.router, createMockConfig(), securitySetup); + }); + + test('should use given timelineId to check if the timeline savedObject already exist', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockGetTimeline.mock.calls[0][1]).toEqual( + mockUniqueParsedTemplateTimelineObjects[0].savedObjectId + ); + }); + + test('should use given templateTimelineId to check if the timeline savedObject already exist', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockGetTemplateTimeline.mock.calls[0][1]).toEqual( + mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId + ); + }); + + test('should UPDATE timeline savedObject', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistTimeline).toHaveBeenCalled(); + }); + + test('should UPDATE timeline savedObject with timelineId', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistTimeline.mock.calls[0][1]).toEqual( + mockUniqueParsedTemplateTimelineObjects[0].savedObjectId + ); + }); + + test('should UPDATE timeline savedObject without timeline version', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistTimeline.mock.calls[0][2]).toEqual( + mockUniqueParsedTemplateTimelineObjects[0].version + ); + }); + + test('should UPDATE a new timeline savedObject witn given timeline and skip the omitted fields', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistTimeline.mock.calls[0][3]).toEqual(mockParsedTemplateTimelineObject); + }); + + test('should NOT Create new pinned events', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistPinnedEventOnTimeline).not.toHaveBeenCalled(); + }); + + test('should provide noteSavedObjectId when Creating notes for a timeline', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistNote.mock.calls[0][1]).toBeNull(); + }); + + test('should provide new timeline version when Creating notes for a timeline', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistNote.mock.calls[0][2]).toEqual(mockCreatedTemplateTimeline.version); + }); + + test('should exclude event notes when creating notes', async () => { + const mockRequest = getImportTimelinesRequest(); + await server.inject(mockRequest, context); + expect(mockPersistNote.mock.calls[0][3]).toEqual({ + eventId: undefined, + note: mockUniqueParsedTemplateTimelineObjects[0].globalNotes[0].note, + timelineId: mockCreatedTemplateTimeline.savedObjectId, + }); + }); + + test('returns 200 when import timeline successfully', async () => { + const response = await server.inject(getImportTimelinesRequest(), context); + expect(response.status).toEqual(200); + }); + + test('should throw error if with given template timeline version conflict', async () => { + mockGetTupleDuplicateErrorsAndUniqueTimeline.mockReturnValue([ + mockDuplicateIdErrors, + [ + { + ...mockUniqueParsedTemplateTimelineObjects[0], + templateTimelineVersion: 1, + }, + ], + ]); + const mockRequest = getImportTimelinesRequest(); + const response = await server.inject(mockRequest, context); + expect(response.body).toEqual({ + success: false, + success_count: 0, + errors: [ + { + id: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', + error: { + status_code: 409, + message: TEMPLATE_TIMELINE_VERSION_CONFLICT_MESSAGE, + }, + }, + ], + }); + }); + + test('should throw error if status updated', async () => { + mockGetTupleDuplicateErrorsAndUniqueTimeline.mockReturnValue([ + mockDuplicateIdErrors, + [ + { + ...mockUniqueParsedTemplateTimelineObjects[0], + status: TimelineStatus.immutable, + }, + ], + ]); + const mockRequest = getImportTimelinesRequest(); + const response = await server.inject(mockRequest, context); + expect(response.body).toEqual({ + success: false, + success_count: 0, + errors: [ + { + id: '79deb4c0-6bc1-11ea-a90b-f5341fb7a189', + error: { + status_code: 409, + message: NOT_ALLOW_UPDATE_STATUS_ERROR_MESSAGE, }, }, ], diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/import_timelines_route.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/import_timelines_route.ts index 5080142f22b155..fb4991d7d1e7d1 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/import_timelines_route.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/import_timelines_route.ts @@ -7,17 +7,17 @@ import { extname } from 'path'; import { chunk, omit } from 'lodash/fp'; -import { validate } from '../../../../common/validate'; -import { importRulesSchema } from '../../../../common/detection_engine/schemas/response/import_rules_schema'; +import uuid from 'uuid'; import { createPromiseFromStreams } from '../../../../../../../src/legacy/utils'; import { IRouter } from '../../../../../../../src/core/server'; import { TIMELINE_IMPORT_URL } from '../../../../common/constants'; +import { validate } from '../../../../common/validate'; import { SetupPlugins } from '../../../plugin'; import { ConfigType } from '../../../config'; import { buildRouteValidation } from '../../../utils/build_validation/route_validation'; - +import { importRulesSchema } from '../../../../common/detection_engine/schemas/response/import_rules_schema'; import { buildSiemResponse, createBulkErrorObject, @@ -28,7 +28,11 @@ import { import { createTimelinesStreamFromNdJson } from '../create_timelines_stream_from_ndjson'; import { ImportTimelinesPayloadSchemaRt } from './schemas/import_timelines_schema'; -import { buildFrameworkRequest } from './utils/common'; +import { + buildFrameworkRequest, + CompareTimelinesStatus, + TimelineStatusActions, +} from './utils/common'; import { getTupleDuplicateErrorsAndUniqueTimeline, isBulkError, @@ -38,11 +42,11 @@ import { PromiseFromStreams, timelineSavedObjectOmittedFields, } from './utils/import_timelines'; -import { createTimelines, getTimeline, getTemplateTimeline } from './utils/create_timelines'; -import { TimelineType, TimelineStatus } from '../../../../common/types/timeline'; -import { checkIsFailureCases } from './utils/update_timelines'; +import { createTimelines } from './utils/create_timelines'; +import { TimelineStatus } from '../../../../common/types/timeline'; const CHUNK_PARSED_OBJECT_SIZE = 10; +const DEFAULT_IMPORT_ERROR = `Something went wrong, there's something we didn't handle properly, please help us improve by providing the file you try to import on https://discuss.elastic.co/c/security/siem`; export const importTimelinesRoute = ( router: IRouter, @@ -118,100 +122,112 @@ export const importTimelinesRoute = ( return null; } + const { - savedObjectId = null, + savedObjectId, pinnedEventIds, globalNotes, eventNotes, + status, templateTimelineId, templateTimelineVersion, + title, timelineType, - version = null, + version, } = parsedTimeline; const parsedTimelineObject = omit( timelineSavedObjectOmittedFields, parsedTimeline ); - let newTimeline = null; try { - const templateTimeline = - templateTimelineId != null - ? await getTemplateTimeline(frameworkRequest, templateTimelineId) - : null; - - const timeline = - savedObjectId != null && - (await getTimeline(frameworkRequest, savedObjectId)); - const isHandlingTemplateTimeline = timelineType === TimelineType.template; - - if ( - (timeline == null && !isHandlingTemplateTimeline) || - (timeline == null && templateTimeline == null && isHandlingTemplateTimeline) - ) { + const compareTimelinesStatus = new CompareTimelinesStatus({ + status, + timelineType, + title, + timelineInput: { + id: savedObjectId, + version, + }, + templateTimelineInput: { + id: templateTimelineId, + version: templateTimelineVersion, + }, + frameworkRequest, + }); + await compareTimelinesStatus.init(); + const isTemplateTimeline = compareTimelinesStatus.isHandlingTemplateTimeline; + if (compareTimelinesStatus.isCreatableViaImport) { // create timeline / template timeline - newTimeline = await createTimelines( + newTimeline = await createTimelines({ frameworkRequest, - { + timeline: { ...parsedTimelineObject, status: - parsedTimelineObject.status === TimelineStatus.draft + status === TimelineStatus.draft ? TimelineStatus.active - : parsedTimelineObject.status, + : status ?? TimelineStatus.active, + templateTimelineVersion: isTemplateTimeline + ? templateTimelineVersion + : null, + templateTimelineId: isTemplateTimeline + ? templateTimelineId ?? uuid.v4() + : null, }, - null, // timelineSavedObjectId - null, // timelineVersion - pinnedEventIds, - isHandlingTemplateTimeline - ? globalNotes - : [...globalNotes, ...eventNotes], - [] // existing note ids - ); + pinnedEventIds: isTemplateTimeline ? null : pinnedEventIds, + notes: isTemplateTimeline ? globalNotes : [...globalNotes, ...eventNotes], + }); resolve({ timeline_id: newTimeline.timeline.savedObjectId, status_code: 200, }); - } else if ( - timeline && - timeline != null && - templateTimeline != null && - isHandlingTemplateTimeline - ) { - // update template timeline - const errorObj = checkIsFailureCases( - isHandlingTemplateTimeline, - version, - templateTimelineVersion ?? null, - timeline, - templateTimeline - ); - if (errorObj != null) { - return siemResponse.error(errorObj); - } + } - newTimeline = await createTimelines( - frameworkRequest, - { ...parsedTimelineObject, templateTimelineId, templateTimelineVersion }, - timeline.savedObjectId, // timelineSavedObjectId - timeline.version, // timelineVersion - pinnedEventIds, - globalNotes, - [] // existing note ids + if (!compareTimelinesStatus.isHandlingTemplateTimeline) { + const errorMessage = compareTimelinesStatus.checkIsFailureCases( + TimelineStatusActions.createViaImport ); + const message = errorMessage?.body ?? DEFAULT_IMPORT_ERROR; - resolve({ - timeline_id: newTimeline.timeline.savedObjectId, - status_code: 200, - }); - } else { resolve( createBulkErrorObject({ id: savedObjectId ?? 'unknown', statusCode: 409, - message: `timeline_id: "${savedObjectId}" already exists`, + message, }) ); + } else { + if (compareTimelinesStatus.isUpdatableViaImport) { + // update template timeline + newTimeline = await createTimelines({ + frameworkRequest, + timeline: parsedTimelineObject, + timelineSavedObjectId: compareTimelinesStatus.timelineId, + timelineVersion: compareTimelinesStatus.timelineVersion, + notes: globalNotes, + existingNoteIds: compareTimelinesStatus.timelineInput.data?.noteIds, + }); + + resolve({ + timeline_id: newTimeline.timeline.savedObjectId, + status_code: 200, + }); + } else { + const errorMessage = compareTimelinesStatus.checkIsFailureCases( + TimelineStatusActions.updateViaImport + ); + + const message = errorMessage?.body ?? DEFAULT_IMPORT_ERROR; + + resolve( + createBulkErrorObject({ + id: savedObjectId ?? 'unknown', + statusCode: 409, + message, + }) + ); + } } } catch (err) { resolve( @@ -236,9 +252,9 @@ export const importTimelinesRoute = ( ]; } - const errorsResp = importTimelineResponse.filter((resp) => - isBulkError(resp) - ) as BulkError[]; + const errorsResp = importTimelineResponse.filter((resp) => { + return isBulkError(resp); + }) as BulkError[]; const successes = importTimelineResponse.filter((resp) => { if (isImportRegular(resp)) { return resp.status_code === 200; @@ -261,7 +277,6 @@ export const importTimelinesRoute = ( } catch (err) { const error = transformError(err); const siemResponse = buildSiemResponse(response); - return siemResponse.error({ body: error.message, statusCode: error.statusCode, diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/schemas/export_timelines_schema.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/schemas/export_timelines_schema.ts index 6f8265903b2a7f..9264f1e3e50474 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/schemas/export_timelines_schema.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/schemas/export_timelines_schema.ts @@ -8,7 +8,6 @@ import * as rt from 'io-ts'; export const exportTimelinesQuerySchema = rt.type({ file_name: rt.string, - exclude_export_details: rt.union([rt.literal('true'), rt.literal('false')]), }); export const exportTimelinesRequestBodySchema = rt.type({ diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/update_timelines_route.test.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/update_timelines_route.test.ts index 2a3feb7afd59c2..3cedb925649a27 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/update_timelines_route.test.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/update_timelines_route.test.ts @@ -26,7 +26,7 @@ import { import { UPDATE_TIMELINE_ERROR_MESSAGE, UPDATE_TEMPLATE_TIMELINE_ERROR_MESSAGE, -} from './utils/update_timelines'; +} from './utils/failure_cases'; describe('update timelines', () => { let server: ReturnType; @@ -93,7 +93,7 @@ describe('update timelines', () => { await server.inject(mockRequest, context); }); - test('should Check a if given timeline id exist', async () => { + test('should Check if given timeline id exist', async () => { expect(mockGetTimeline.mock.calls[0][1]).toEqual(updateTimelineWithTimelineId.timelineId); }); @@ -178,7 +178,7 @@ describe('update timelines', () => { timeline: [mockGetTemplateTimelineValue], }), persistTimeline: mockPersistTimeline.mockReturnValue({ - timeline: updateTimelineWithTimelineId.timeline, + timeline: updateTemplateTimelineWithTimelineId.timeline, }), }; }); @@ -211,7 +211,7 @@ describe('update timelines', () => { test('should Update existing template timeline with template timelineId', async () => { expect(mockGetTemplateTimeline.mock.calls[0][1]).toEqual( - updateTemplateTimelineWithTimelineId.timelineId + updateTemplateTimelineWithTimelineId.timeline.templateTimelineId ); }); diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/update_timelines_route.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/update_timelines_route.ts index d5ecd408a6ef45..f59df151b69550 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/update_timelines_route.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/update_timelines_route.ts @@ -7,19 +7,17 @@ import { IRouter } from '../../../../../../../src/core/server'; import { TIMELINE_URL } from '../../../../common/constants'; -import { TimelineType } from '../../../../common/types/timeline'; import { SetupPlugins } from '../../../plugin'; import { buildRouteValidation } from '../../../utils/build_validation/route_validation'; import { ConfigType } from '../../..'; import { transformError, buildSiemResponse } from '../../detection_engine/routes/utils'; -import { FrameworkRequest } from '../../framework'; import { updateTimelineSchema } from './schemas/update_timelines_schema'; -import { buildFrameworkRequest } from './utils/common'; -import { createTimelines, getTimeline, getTemplateTimeline } from './utils/create_timelines'; -import { checkIsFailureCases } from './utils/update_timelines'; +import { buildFrameworkRequest, TimelineStatusActions } from './utils/common'; +import { createTimelines } from './utils/create_timelines'; +import { CompareTimelinesStatus } from './utils/compare_timelines_status'; export const updateTimelinesRoute = ( router: IRouter, @@ -33,7 +31,7 @@ export const updateTimelinesRoute = ( body: buildRouteValidation(updateTimelineSchema), }, options: { - tags: ['access:securitySolution'], + tags: ['access:siem'], }, }, // eslint-disable-next-line complexity @@ -43,39 +41,54 @@ export const updateTimelinesRoute = ( try { const frameworkRequest = await buildFrameworkRequest(context, security, request); const { timelineId, timeline, version } = request.body; - const { templateTimelineId, templateTimelineVersion, timelineType } = timeline; - const isHandlingTemplateTimeline = timelineType === TimelineType.template; - const existTimeline = - timelineId != null ? await getTimeline(frameworkRequest, timelineId) : null; + const { + templateTimelineId, + templateTimelineVersion, + timelineType, + title, + status, + } = timeline; - const existTemplateTimeline = - templateTimelineId != null - ? await getTemplateTimeline(frameworkRequest, templateTimelineId) - : null; - - const errorObj = checkIsFailureCases( - isHandlingTemplateTimeline, - version, - templateTimelineVersion ?? null, - existTimeline, - existTemplateTimeline - ); - if (errorObj != null) { - return siemResponse.error(errorObj); - } - const updatedTimeline = await createTimelines( - (frameworkRequest as unknown) as FrameworkRequest, - timeline, - timelineId, - version - ); - return response.ok({ - body: { - data: { - persistTimeline: updatedTimeline, - }, + const compareTimelinesStatus = new CompareTimelinesStatus({ + status, + title, + timelineType, + timelineInput: { + id: timelineId, + version, + }, + templateTimelineInput: { + id: templateTimelineId, + version: templateTimelineVersion, }, + frameworkRequest, }); + + await compareTimelinesStatus.init(); + if (compareTimelinesStatus.isUpdatable) { + const updatedTimeline = await createTimelines({ + frameworkRequest, + timeline, + timelineSavedObjectId: timelineId, + timelineVersion: version, + }); + + return response.ok({ + body: { + data: { + persistTimeline: updatedTimeline, + }, + }, + }); + } else { + const error = compareTimelinesStatus.checkIsFailureCases(TimelineStatusActions.update); + return siemResponse.error( + error || { + statusCode: 405, + body: 'update timeline error', + } + ); + } } catch (err) { const error = transformError(err); return siemResponse.error({ diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/common.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/common.ts index adbfdbf6d6051c..2c2d651fd483be 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/common.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/common.ts @@ -5,9 +5,10 @@ */ import { set } from 'lodash/fp'; -import { RequestHandlerContext } from 'src/core/server'; +import { KibanaRequest, RequestHandlerContext } from 'src/core/server'; + import { SetupPlugins } from '../../../../plugin'; -import { KibanaRequest } from '../../../../../../../../src/core/server'; + import { FrameworkRequest } from '../../../framework'; export const buildFrameworkRequest = async ( @@ -28,3 +29,19 @@ export const buildFrameworkRequest = async ( ) ); }; + +export enum TimelineStatusActions { + create = 'create', + createViaImport = 'createViaImport', + update = 'update', + updateViaImport = 'updateViaImport', +} + +export type TimelineStatusAction = + | TimelineStatusActions.create + | TimelineStatusActions.createViaImport + | TimelineStatusActions.update + | TimelineStatusActions.updateViaImport; + +export * from './compare_timelines_status'; +export * from './timeline_object'; diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/compare_timelines_status.test.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/compare_timelines_status.test.ts new file mode 100644 index 00000000000000..a6d379e534bc28 --- /dev/null +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/compare_timelines_status.test.ts @@ -0,0 +1,810 @@ +/* + * 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 { TimelineType, TimelineStatus } from '../../../../../common/types/timeline'; +import { FrameworkRequest } from '../../../framework'; + +import { + mockUniqueParsedObjects, + mockUniqueParsedTemplateTimelineObjects, + mockGetTemplateTimelineValue, + mockGetTimelineValue, +} from '../__mocks__/import_timelines'; + +import { CompareTimelinesStatus as TimelinesStatusType } from './compare_timelines_status'; +import { + EMPTY_TITLE_ERROR_MESSAGE, + UPDATE_STATUS_ERROR_MESSAGE, + UPDATE_TEMPLATE_TIMELINE_ERROR_MESSAGE, + TEMPLATE_TIMELINE_VERSION_CONFLICT_MESSAGE, + CREATE_TEMPLATE_TIMELINE_ERROR_MESSAGE, + getImportExistingTimelineError, +} from './failure_cases'; +import { TimelineStatusActions } from './common'; + +describe('CompareTimelinesStatus', () => { + describe('timeline', () => { + describe('given timeline exists', () => { + const mockGetTimeline: jest.Mock = jest.fn(); + const mockGetTemplateTimeline: jest.Mock = jest.fn(); + let timelineObj: TimelinesStatusType; + + afterEach(() => { + jest.clearAllMocks(); + }); + + afterAll(() => { + jest.resetModules(); + }); + + beforeAll(() => { + jest.resetModules(); + }); + + beforeEach(async () => { + jest.doMock('../../saved_object', () => { + return { + getTimeline: mockGetTimeline.mockReturnValue(mockGetTimelineValue), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue({ + timeline: [], + }), + }; + }); + + const CompareTimelinesStatus = jest.requireActual('./compare_timelines_status') + .CompareTimelinesStatus; + + timelineObj = new CompareTimelinesStatus({ + timelineInput: { + id: mockUniqueParsedObjects[0].savedObjectId, + version: mockUniqueParsedObjects[0].version, + }, + timelineType: TimelineType.default, + title: mockUniqueParsedObjects[0].title, + templateTimelineInput: { + id: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId, + version: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineVersion, + }, + frameworkRequest: {} as FrameworkRequest, + }); + + await timelineObj.init(); + }); + + test('should get timeline', () => { + expect(mockGetTimeline).toHaveBeenCalled(); + }); + + test('should get templateTimeline', () => { + expect(mockGetTemplateTimeline).toHaveBeenCalled(); + }); + + test('should not creatable', () => { + expect(timelineObj.isCreatable).toEqual(false); + }); + + test('should not CreatableViaImport', () => { + expect(timelineObj.isCreatableViaImport).toEqual(false); + }); + + test('should be Updatable', () => { + expect(timelineObj.isUpdatable).toEqual(true); + }); + + test('should not be UpdatableViaImport', () => { + expect(timelineObj.isUpdatableViaImport).toEqual(false); + }); + + test('should indicate we are handling a timeline', () => { + expect(timelineObj.isHandlingTemplateTimeline).toEqual(false); + }); + }); + + describe('given timeline does NOT exists', () => { + const mockGetTimeline: jest.Mock = jest.fn(); + const mockGetTemplateTimeline: jest.Mock = jest.fn(); + let timelineObj: TimelinesStatusType; + + afterEach(() => { + jest.clearAllMocks(); + }); + + afterAll(() => { + jest.resetModules(); + }); + + beforeAll(() => { + jest.resetModules(); + }); + + beforeEach(async () => { + jest.doMock('../../saved_object', () => { + return { + getTimeline: mockGetTimeline.mockReturnValue(null), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue({ + timeline: [], + }), + }; + }); + + const CompareTimelinesStatus = jest.requireActual('./compare_timelines_status') + .CompareTimelinesStatus; + + timelineObj = new CompareTimelinesStatus({ + timelineInput: { + id: mockUniqueParsedObjects[0].savedObjectId, + version: mockUniqueParsedObjects[0].version, + }, + timelineType: TimelineType.default, + title: mockUniqueParsedObjects[0].title, + templateTimelineInput: { + id: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId, + version: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineVersion, + }, + frameworkRequest: {} as FrameworkRequest, + }); + + await timelineObj.init(); + }); + + test('should get timeline', () => { + expect(mockGetTimeline).toHaveBeenCalled(); + }); + + test('should get templateTimeline', () => { + expect(mockGetTemplateTimeline).toHaveBeenCalled(); + }); + + test('should be creatable', () => { + expect(timelineObj.isCreatable).toEqual(true); + }); + + test('should be CreatableViaImport', () => { + expect(timelineObj.isCreatableViaImport).toEqual(true); + }); + + test('should be Updatable', () => { + expect(timelineObj.isUpdatable).toEqual(false); + }); + + test('should not be UpdatableViaImport', () => { + expect(timelineObj.isUpdatableViaImport).toEqual(false); + }); + + test('should indicate we are handling a timeline', () => { + expect(timelineObj.isHandlingTemplateTimeline).toEqual(false); + }); + }); + }); + + describe('template timeline', () => { + describe('given template timeline exists', () => { + const mockGetTimeline: jest.Mock = jest.fn(); + const mockGetTemplateTimeline: jest.Mock = jest.fn(); + + let timelineObj: TimelinesStatusType; + + beforeEach(async () => { + jest.doMock('../../saved_object', () => ({ + getTimeline: mockGetTimeline.mockReturnValue(mockGetTemplateTimelineValue), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue({ + timeline: [mockGetTemplateTimelineValue], + }), + })); + + const CompareTimelinesStatus = jest.requireActual('./compare_timelines_status') + .CompareTimelinesStatus; + + timelineObj = new CompareTimelinesStatus({ + timelineInput: { + id: mockUniqueParsedObjects[0].savedObjectId, + version: mockUniqueParsedObjects[0].version, + }, + timelineType: TimelineType.template, + title: mockUniqueParsedObjects[0].title, + templateTimelineInput: { + id: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId, + version: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineVersion, + }, + frameworkRequest: {} as FrameworkRequest, + }); + await timelineObj.init(); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + afterAll(() => { + jest.resetModules(); + }); + + beforeAll(() => { + jest.resetModules(); + }); + + test('should get timeline', () => { + expect(mockGetTimeline).toHaveBeenCalled(); + }); + + test('should get templateTimeline', () => { + expect(mockGetTemplateTimeline).toHaveBeenCalled(); + }); + + test('should not creatable', () => { + expect(timelineObj.isCreatable).toEqual(false); + }); + + test('should not CreatableViaImport', () => { + expect(timelineObj.isCreatableViaImport).toEqual(false); + }); + + test('should be Updatable', () => { + expect(timelineObj.isUpdatable).toEqual(true); + }); + + test('should be UpdatableViaImport', () => { + expect(timelineObj.isUpdatableViaImport).toEqual(true); + }); + + test('should indicate we are handling a template timeline', () => { + expect(timelineObj.isHandlingTemplateTimeline).toEqual(true); + }); + }); + + describe('given template timeline does NOT exists', () => { + const mockGetTimeline: jest.Mock = jest.fn(); + const mockGetTemplateTimeline: jest.Mock = jest.fn(); + + let timelineObj: TimelinesStatusType; + + afterEach(() => { + jest.clearAllMocks(); + }); + + afterAll(() => { + jest.resetModules(); + }); + + beforeAll(() => { + jest.resetModules(); + }); + + beforeEach(async () => { + jest.doMock('../../saved_object', () => ({ + getTimeline: mockGetTimeline, + getTimelineByTemplateTimelineId: mockGetTemplateTimeline, + })); + + const CompareTimelinesStatus = jest.requireActual('./compare_timelines_status') + .CompareTimelinesStatus; + + timelineObj = new CompareTimelinesStatus({ + timelineInput: { + id: mockUniqueParsedObjects[0].savedObjectId, + version: mockUniqueParsedObjects[0].version, + }, + timelineType: TimelineType.template, + title: mockUniqueParsedObjects[0].title, + templateTimelineInput: { + id: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId, + version: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineVersion, + }, + frameworkRequest: {} as FrameworkRequest, + }); + await timelineObj.init(); + }); + + test('should get timeline', () => { + expect(mockGetTimeline).toHaveBeenCalled(); + }); + + test('should get templateTimeline', () => { + expect(mockGetTemplateTimeline).toHaveBeenCalled(); + }); + + test('should be creatable', () => { + expect(timelineObj.isCreatable).toEqual(true); + }); + + test('should throw no error on creatable', () => { + expect(timelineObj.checkIsFailureCases(TimelineStatusActions.create)).toBeNull(); + }); + + test('should be CreatableViaImport', () => { + expect(timelineObj.isCreatableViaImport).toEqual(true); + }); + + test('should throw no error on CreatableViaImport', () => { + expect(timelineObj.checkIsFailureCases(TimelineStatusActions.createViaImport)).toBeNull(); + }); + + test('should not be Updatable', () => { + expect(timelineObj.isUpdatable).toEqual(false); + }); + + test('should throw error when updat', () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.update); + expect(error?.body).toEqual(UPDATE_TEMPLATE_TIMELINE_ERROR_MESSAGE); + }); + + test('should not be UpdatableViaImport', () => { + expect(timelineObj.isUpdatableViaImport).toEqual(false); + }); + + test('should throw error when UpdatableViaImport', () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.updateViaImport); + expect(error?.body).toEqual(UPDATE_TEMPLATE_TIMELINE_ERROR_MESSAGE); + }); + + test('should indicate we are handling a template timeline', () => { + expect(timelineObj.isHandlingTemplateTimeline).toEqual(true); + }); + }); + }); + + describe(`Throw error if given title does NOT exists`, () => { + describe('timeline', () => { + const mockGetTimeline: jest.Mock = jest.fn(); + const mockGetTemplateTimeline: jest.Mock = jest.fn(); + let timelineObj: TimelinesStatusType; + + afterEach(() => { + jest.clearAllMocks(); + }); + + afterAll(() => { + jest.resetModules(); + }); + + beforeAll(() => { + jest.resetModules(); + }); + + beforeEach(async () => { + jest.doMock('../../saved_object', () => { + return { + getTimeline: mockGetTimeline.mockReturnValue(null), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue({ + timeline: [], + }), + }; + }); + + const CompareTimelinesStatus = jest.requireActual('./compare_timelines_status') + .CompareTimelinesStatus; + + timelineObj = new CompareTimelinesStatus({ + timelineInput: { + id: mockUniqueParsedObjects[0].savedObjectId, + type: TimelineType.default, + version: mockUniqueParsedObjects[0].version, + }, + timelineType: TimelineType.default, + title: null, + templateTimelineInput: { + id: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId, + type: TimelineType.template, + version: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineVersion, + }, + frameworkRequest: {} as FrameworkRequest, + }); + + await timelineObj.init(); + }); + + test(`should not be creatable`, () => { + expect(timelineObj.isCreatable).toEqual(false); + }); + + test(`throw error on create`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.create); + expect(error?.body).toEqual(EMPTY_TITLE_ERROR_MESSAGE); + }); + + test(`should not be creatable via import`, () => { + expect(timelineObj.isCreatableViaImport).toEqual(false); + }); + + test(`throw error when create via import`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.createViaImport); + expect(error?.body).toEqual(EMPTY_TITLE_ERROR_MESSAGE); + }); + + test(`should not be updatable`, () => { + expect(timelineObj.isUpdatable).toEqual(false); + }); + + test(`throw error when update`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.update); + expect(error?.body).toEqual(EMPTY_TITLE_ERROR_MESSAGE); + }); + + test(`should not be updatable via import`, () => { + expect(timelineObj.isUpdatableViaImport).toEqual(false); + }); + }); + + describe('template timeline', () => { + const mockGetTimeline: jest.Mock = jest.fn(); + const mockGetTemplateTimeline: jest.Mock = jest.fn(); + let timelineObj: TimelinesStatusType; + + afterEach(() => { + jest.clearAllMocks(); + }); + + afterAll(() => { + jest.resetModules(); + }); + + beforeAll(() => { + jest.resetModules(); + }); + + beforeEach(async () => { + jest.doMock('../../saved_object', () => { + return { + getTimeline: mockGetTimeline.mockReturnValue(null), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue({ + timeline: [], + }), + }; + }); + + const CompareTimelinesStatus = jest.requireActual('./compare_timelines_status') + .CompareTimelinesStatus; + + timelineObj = new CompareTimelinesStatus({ + timelineInput: { + id: mockUniqueParsedObjects[0].savedObjectId, + type: TimelineType.default, + version: mockUniqueParsedObjects[0].version, + }, + timelineType: TimelineType.default, + title: null, + templateTimelineInput: { + id: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId, + type: TimelineType.template, + version: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineVersion, + }, + frameworkRequest: {} as FrameworkRequest, + }); + + await timelineObj.init(); + }); + + test(`should not be creatable`, () => { + expect(timelineObj.isCreatable).toEqual(false); + }); + + test(`throw error on create`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.create); + expect(error?.body).toEqual(EMPTY_TITLE_ERROR_MESSAGE); + }); + + test(`should not be creatable via import`, () => { + expect(timelineObj.isCreatableViaImport).toEqual(false); + }); + + test(`throw error when create via import`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.createViaImport); + expect(error?.body).toEqual(EMPTY_TITLE_ERROR_MESSAGE); + }); + + test(`should not be updatable`, () => { + expect(timelineObj.isUpdatable).toEqual(false); + }); + + test(`throw error when update`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.update); + expect(error?.body).toEqual(EMPTY_TITLE_ERROR_MESSAGE); + }); + + test(`should not be updatable via import`, () => { + expect(timelineObj.isUpdatableViaImport).toEqual(false); + }); + + test(`throw error when update via import`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.updateViaImport); + expect(error?.body).toEqual(EMPTY_TITLE_ERROR_MESSAGE); + }); + }); + }); + + describe(`Throw error if timeline status is updated`, () => { + describe('immutable timeline', () => { + const mockGetTimeline: jest.Mock = jest.fn(); + const mockGetTemplateTimeline: jest.Mock = jest.fn(); + let timelineObj: TimelinesStatusType; + + afterEach(() => { + jest.clearAllMocks(); + }); + + afterAll(() => { + jest.resetModules(); + }); + + beforeAll(() => { + jest.resetModules(); + }); + + beforeEach(async () => { + jest.doMock('../../saved_object', () => { + return { + getTimeline: mockGetTimeline.mockReturnValue({ + ...mockGetTimelineValue, + status: TimelineStatus.immutable, + }), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue({ + timeline: [], + }), + }; + }); + + const CompareTimelinesStatus = jest.requireActual('./compare_timelines_status') + .CompareTimelinesStatus; + + timelineObj = new CompareTimelinesStatus({ + timelineInput: { + id: mockUniqueParsedObjects[0].savedObjectId, + type: TimelineType.default, + version: mockUniqueParsedObjects[0].version, + }, + timelineType: TimelineType.default, + title: 'mock title', + status: TimelineStatus.immutable, + templateTimelineInput: { + id: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId, + type: TimelineType.template, + version: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineVersion, + }, + frameworkRequest: {} as FrameworkRequest, + }); + + await timelineObj.init(); + }); + + test(`should not be updatable if existing status is immutable`, () => { + expect(timelineObj.isUpdatable).toBe(false); + }); + + test(`should throw error when update`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.update); + expect(error?.body).toEqual(UPDATE_STATUS_ERROR_MESSAGE); + }); + + test(`should not be updatable via import if existing status is immutable`, () => { + expect(timelineObj.isUpdatableViaImport).toBe(false); + }); + + test(`should throw error when update via import`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.updateViaImport); + expect(error?.body).toEqual( + getImportExistingTimelineError(mockUniqueParsedObjects[0].savedObjectId) + ); + }); + }); + + describe('immutable template timeline', () => { + const mockGetTimeline: jest.Mock = jest.fn(); + const mockGetTemplateTimeline: jest.Mock = jest.fn(); + let timelineObj: TimelinesStatusType; + + afterEach(() => { + jest.clearAllMocks(); + }); + + afterAll(() => { + jest.resetModules(); + }); + + beforeAll(() => { + jest.resetModules(); + }); + + beforeEach(async () => { + jest.doMock('../../saved_object', () => { + return { + getTimeline: mockGetTimeline.mockReturnValue({ + ...mockGetTemplateTimelineValue, + status: TimelineStatus.immutable, + }), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue({ + timeline: [{ ...mockGetTemplateTimelineValue, status: TimelineStatus.immutable }], + }), + }; + }); + + const CompareTimelinesStatus = jest.requireActual('./compare_timelines_status') + .CompareTimelinesStatus; + + timelineObj = new CompareTimelinesStatus({ + timelineInput: { + id: mockUniqueParsedObjects[0].savedObjectId, + type: TimelineType.default, + version: mockUniqueParsedObjects[0].version, + }, + status: TimelineStatus.immutable, + timelineType: TimelineType.template, + title: 'mock title', + templateTimelineInput: { + id: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId, + type: TimelineType.template, + version: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineVersion, + }, + frameworkRequest: {} as FrameworkRequest, + }); + + await timelineObj.init(); + }); + + test(`should not be able to update`, () => { + expect(timelineObj.isUpdatable).toEqual(false); + }); + + test(`should not throw error when update`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.update); + expect(error?.body).toEqual(UPDATE_STATUS_ERROR_MESSAGE); + }); + + test(`should not be able to update via import`, () => { + expect(timelineObj.isUpdatableViaImport).toEqual(true); + }); + + test(`should not throw error when update via import`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.updateViaImport); + expect(error?.body).toBeUndefined(); + }); + }); + }); + + describe('If create template timeline without template timeline id', () => { + const mockGetTimeline: jest.Mock = jest.fn(); + const mockGetTemplateTimeline: jest.Mock = jest.fn(); + + let timelineObj: TimelinesStatusType; + + afterEach(() => { + jest.clearAllMocks(); + }); + + afterAll(() => { + jest.resetModules(); + }); + + beforeAll(() => { + jest.resetModules(); + }); + + beforeEach(async () => { + jest.doMock('../../saved_object', () => ({ + getTimeline: mockGetTimeline, + getTimelineByTemplateTimelineId: mockGetTemplateTimeline, + })); + + const CompareTimelinesStatus = jest.requireActual('./compare_timelines_status') + .CompareTimelinesStatus; + + timelineObj = new CompareTimelinesStatus({ + timelineInput: { + id: mockUniqueParsedObjects[0].savedObjectId, + version: mockUniqueParsedObjects[0].version, + }, + timelineType: TimelineType.template, + title: mockUniqueParsedObjects[0].title, + templateTimelineInput: { + id: null, + version: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineVersion, + }, + frameworkRequest: {} as FrameworkRequest, + }); + await timelineObj.init(); + }); + + test('should not be creatable', () => { + expect(timelineObj.isCreatable).toEqual(true); + }); + + test(`throw no error when create`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.create); + expect(error?.body).toBeUndefined(); + }); + + test('should be Creatable via import', () => { + expect(timelineObj.isCreatableViaImport).toEqual(true); + }); + + test(`throw no error when CreatableViaImport`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.createViaImport); + expect(error?.body).toBeUndefined(); + }); + }); + + describe('Throw error if template timeline version is conflict when update via import', () => { + const mockGetTimeline: jest.Mock = jest.fn(); + const mockGetTemplateTimeline: jest.Mock = jest.fn(); + + let timelineObj: TimelinesStatusType; + + afterEach(() => { + jest.clearAllMocks(); + }); + + afterAll(() => { + jest.resetModules(); + }); + + beforeAll(() => { + jest.resetModules(); + }); + + beforeEach(async () => { + jest.doMock('../../saved_object', () => ({ + getTimeline: mockGetTimeline.mockReturnValue(mockGetTemplateTimelineValue), + getTimelineByTemplateTimelineId: mockGetTemplateTimeline.mockReturnValue({ + timeline: [mockGetTemplateTimelineValue], + }), + })); + + const CompareTimelinesStatus = jest.requireActual('./compare_timelines_status') + .CompareTimelinesStatus; + + timelineObj = new CompareTimelinesStatus({ + timelineInput: { + id: mockUniqueParsedObjects[0].savedObjectId, + version: mockUniqueParsedObjects[0].version, + }, + timelineType: TimelineType.template, + title: mockUniqueParsedObjects[0].title, + templateTimelineInput: { + id: mockUniqueParsedTemplateTimelineObjects[0].templateTimelineId, + version: mockGetTemplateTimelineValue.templateTimelineVersion, + }, + frameworkRequest: {} as FrameworkRequest, + }); + await timelineObj.init(); + }); + + test('should not be creatable', () => { + expect(timelineObj.isCreatable).toEqual(false); + }); + + test(`throw error when create`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.create); + expect(error?.body).toEqual(CREATE_TEMPLATE_TIMELINE_ERROR_MESSAGE); + }); + + test('should not be Creatable via import', () => { + expect(timelineObj.isCreatableViaImport).toEqual(false); + }); + + test(`throw error when CreatableViaImport`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.createViaImport); + expect(error?.body).toEqual( + getImportExistingTimelineError(mockUniqueParsedObjects[0].savedObjectId) + ); + }); + + test('should be updatable', () => { + expect(timelineObj.isUpdatable).toEqual(true); + }); + + test(`throw no error when update`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.update); + expect(error).toBeNull(); + }); + + test('should not be updatable via import', () => { + expect(timelineObj.isUpdatableViaImport).toEqual(false); + }); + + test(`throw error when UpdatableViaImport`, () => { + const error = timelineObj.checkIsFailureCases(TimelineStatusActions.updateViaImport); + expect(error?.body).toEqual(TEMPLATE_TIMELINE_VERSION_CONFLICT_MESSAGE); + }); + }); +}); diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/compare_timelines_status.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/compare_timelines_status.ts new file mode 100644 index 00000000000000..d61d217a4cf492 --- /dev/null +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/compare_timelines_status.ts @@ -0,0 +1,247 @@ +/* + * 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 { isEmpty } from 'lodash/fp'; +import { + TimelineTypeLiteralWithNull, + TimelineType, + TimelineStatus, + TimelineTypeLiteral, +} from '../../../../../common/types/timeline'; +import { FrameworkRequest } from '../../../framework'; + +import { TimelineStatusActions, TimelineStatusAction } from './common'; +import { TimelineObject } from './timeline_object'; +import { + checkIsCreateFailureCases, + checkIsUpdateFailureCases, + checkIsCreateViaImportFailureCases, + checkIsUpdateViaImportFailureCases, + commonFailureChecker, +} from './failure_cases'; + +interface GivenTimelineInput { + id: string | null | undefined; + type?: TimelineTypeLiteralWithNull; + version: string | number | null | undefined; +} + +interface TimelinesStatusProps { + status: TimelineStatus | null | undefined; + title: string | null | undefined; + timelineType: TimelineTypeLiteralWithNull | undefined; + timelineInput: GivenTimelineInput; + templateTimelineInput: GivenTimelineInput; + frameworkRequest: FrameworkRequest; +} + +export class CompareTimelinesStatus { + public readonly timelineObject: TimelineObject; + public readonly templateTimelineObject: TimelineObject; + private readonly timelineType: TimelineTypeLiteral; + private readonly title: string | null; + private readonly status: TimelineStatus; + constructor({ + status = TimelineStatus.active, + title, + timelineType = TimelineType.default, + timelineInput, + templateTimelineInput, + frameworkRequest, + }: TimelinesStatusProps) { + this.timelineObject = new TimelineObject({ + id: timelineInput.id, + type: timelineInput.type ?? TimelineType.default, + version: timelineInput.version, + frameworkRequest, + }); + + this.templateTimelineObject = new TimelineObject({ + id: templateTimelineInput.id, + type: templateTimelineInput.type ?? TimelineType.template, + version: templateTimelineInput.version, + frameworkRequest, + }); + + this.timelineType = timelineType ?? TimelineType.default; + this.title = title ?? null; + this.status = status ?? TimelineStatus.active; + } + + public get isCreatable() { + return ( + this.isTitleValid && + !this.isSavedObjectVersionConflict && + ((this.timelineObject.isCreatable && !this.isHandlingTemplateTimeline) || + (this.templateTimelineObject.isCreatable && + this.timelineObject.isCreatable && + this.isHandlingTemplateTimeline)) + ); + } + + public get isCreatableViaImport() { + return ( + this.isCreatedStatusValid && + ((this.isCreatable && !this.isHandlingTemplateTimeline) || + (this.isCreatable && this.isHandlingTemplateTimeline && this.isTemplateVersionValid)) + ); + } + + private get isCreatedStatusValid() { + const obj = this.isHandlingTemplateTimeline ? this.templateTimelineObject : this.timelineObject; + + return obj.isExists + ? this.status === obj.getData?.status && this.status !== TimelineStatus.draft + : this.status !== TimelineStatus.draft; + } + + public get isUpdatable() { + return ( + this.isTitleValid && + !this.isSavedObjectVersionConflict && + ((this.timelineObject.isUpdatable && !this.isHandlingTemplateTimeline) || + (this.templateTimelineObject.isUpdatable && this.isHandlingTemplateTimeline)) + ); + } + + private get isTimelineTypeValid() { + const obj = this.isHandlingTemplateTimeline ? this.templateTimelineObject : this.timelineObject; + const existintTimelineType = obj.getData?.timelineType ?? TimelineType.default; + return obj.isExists ? this.timelineType === existintTimelineType : true; + } + + public get isUpdatableViaImport() { + return ( + this.isTimelineTypeValid && + this.isTitleValid && + this.isUpdatedTimelineStatusValid && + (this.timelineObject.isUpdatableViaImport || + (this.templateTimelineObject.isUpdatableViaImport && + this.isTemplateVersionValid && + this.isHandlingTemplateTimeline)) + ); + } + + public get isTitleValid() { + return ( + (this.status !== TimelineStatus.draft && !isEmpty(this.title)) || + this.status === TimelineStatus.draft + ); + } + + public getFailureChecker(action?: TimelineStatusAction) { + if (action === TimelineStatusActions.create) { + return checkIsCreateFailureCases; + } else if (action === TimelineStatusActions.createViaImport) { + return checkIsCreateViaImportFailureCases; + } else if (action === TimelineStatusActions.update) { + return checkIsUpdateFailureCases; + } else { + return checkIsUpdateViaImportFailureCases; + } + } + + public checkIsFailureCases(action?: TimelineStatusAction) { + const failureChecker = this.getFailureChecker(action); + const version = this.templateTimelineObject.getVersion; + const commonError = commonFailureChecker(this.status, this.title); + if (commonError != null) { + return commonError; + } + + const msg = failureChecker( + this.isHandlingTemplateTimeline, + this.status, + this.timelineType, + this.timelineObject.getVersion?.toString() ?? null, + version != null && typeof version === 'string' ? parseInt(version, 10) : version, + this.templateTimelineObject.getId, + this.timelineObject.getData, + this.templateTimelineObject.getData + ); + return msg; + } + + public get templateTimelineInput() { + return this.templateTimelineObject; + } + + public get timelineInput() { + return this.timelineObject; + } + + private getTimelines() { + return Promise.all([ + this.timelineObject.getTimeline(), + this.templateTimelineObject.getTimeline(), + ]); + } + + public get isHandlingTemplateTimeline() { + return this.timelineType === TimelineType.template; + } + + private get isSavedObjectVersionConflict() { + const version = this.timelineObject?.getVersion; + const existingVersion = this.timelineObject?.data?.version; + if (version != null && this.timelineObject.isExists) { + return version !== existingVersion; + } else if (this.timelineObject.isExists && version == null) { + return true; + } + return false; + } + + private get isTemplateVersionConflict() { + const version = this.templateTimelineObject?.getVersion; + const existingTemplateTimelineVersion = this.templateTimelineObject?.data + ?.templateTimelineVersion; + if ( + version != null && + this.templateTimelineObject.isExists && + existingTemplateTimelineVersion != null + ) { + return version <= existingTemplateTimelineVersion; + } else if (this.templateTimelineObject.isExists && version == null) { + return true; + } + return false; + } + + private get isTemplateVersionValid() { + const version = this.templateTimelineObject?.getVersion; + return typeof version === 'number' && !this.isTemplateVersionConflict; + } + + private get isUpdatedTimelineStatusValid() { + const status = this.status; + const existingStatus = this.isHandlingTemplateTimeline + ? this.templateTimelineInput.data?.status + : this.timelineInput.data?.status; + return ( + ((existingStatus == null || existingStatus === TimelineStatus.active) && + (status == null || status === TimelineStatus.active)) || + (existingStatus != null && status === existingStatus) + ); + } + + public get timelineId() { + if (this.isHandlingTemplateTimeline) { + return this.templateTimelineInput.data?.savedObjectId ?? this.templateTimelineInput.getId; + } + return this.timelineInput.data?.savedObjectId ?? this.timelineInput.getId; + } + + public get timelineVersion() { + const version = this.isHandlingTemplateTimeline + ? this.templateTimelineInput.data?.version ?? this.timelineInput.getVersion + : this.timelineInput.data?.version ?? this.timelineInput.getVersion; + return version != null ? version.toString() : null; + } + + public async init() { + await this.getTimelines(); + } +} diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/create_timelines.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/create_timelines.ts index 5b2470821b6909..abe298566341c1 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/create_timelines.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/create_timelines.ts @@ -12,6 +12,7 @@ import { FrameworkRequest } from '../../../framework'; import { SavedTimeline, TimelineSavedObject } from '../../../../../common/types/timeline'; import { SavedNote } from '../../../../../common/types/timeline/note'; import { NoteResult, ResponseTimeline } from '../../../../graphql/types'; + export const CREATE_TIMELINE_ERROR_MESSAGE = 'UPDATE timeline with POST is not allowed, please use PATCH instead'; export const CREATE_TEMPLATE_TIMELINE_ERROR_MESSAGE = @@ -20,16 +21,10 @@ export const CREATE_TEMPLATE_TIMELINE_ERROR_MESSAGE = export const saveTimelines = ( frameworkRequest: FrameworkRequest, timeline: SavedTimeline, - timelineSavedObjectId?: string | null, - timelineVersion?: string | null -): Promise => { - return timelineLib.persistTimeline( - frameworkRequest, - timelineSavedObjectId ?? null, - timelineVersion ?? null, - timeline - ); -}; + timelineSavedObjectId: string | null = null, + timelineVersion: string | null = null +): Promise => + timelineLib.persistTimeline(frameworkRequest, timelineSavedObjectId, timelineVersion, timeline); export const savePinnedEvents = ( frameworkRequest: FrameworkRequest, @@ -72,15 +67,25 @@ export const saveNotes = ( ); }; -export const createTimelines = async ( - frameworkRequest: FrameworkRequest, - timeline: SavedTimeline, - timelineSavedObjectId?: string | null, - timelineVersion?: string | null, - pinnedEventIds?: string[] | null, - notes?: NoteResult[], - existingNoteIds?: string[] -): Promise => { +interface CreateTimelineProps { + frameworkRequest: FrameworkRequest; + timeline: SavedTimeline; + timelineSavedObjectId?: string | null; + timelineVersion?: string | null; + pinnedEventIds?: string[] | null; + notes?: NoteResult[]; + existingNoteIds?: string[]; +} + +export const createTimelines = async ({ + frameworkRequest, + timeline, + timelineSavedObjectId = null, + timelineVersion = null, + pinnedEventIds = null, + notes = [], + existingNoteIds = [], +}: CreateTimelineProps): Promise => { const responseTimeline = await saveTimelines( frameworkRequest, timeline, @@ -89,7 +94,6 @@ export const createTimelines = async ( ); const newTimelineSavedObjectId = responseTimeline.timeline.savedObjectId; const newTimelineVersion = responseTimeline.timeline.version; - let myPromises: unknown[] = []; if (pinnedEventIds != null && !isEmpty(pinnedEventIds)) { myPromises = [ @@ -143,8 +147,9 @@ export const getTemplateTimeline = async ( frameworkRequest, templateTimelineId ); + // eslint-disable-next-line no-empty } catch (e) { return null; } - return templateTimeline.timeline[0]; + return templateTimeline?.timeline[0] ?? null; }; diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/export_timelines.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/export_timelines.ts index 1f02851c56b80e..23090bfc6f0bd9 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/export_timelines.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/export_timelines.ts @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +import { omit } from 'lodash/fp'; + import { SavedObjectsClient, SavedObjectsFindOptions, @@ -16,7 +18,6 @@ import { ExportedNotes, TimelineSavedObject, ExportTimelineNotFoundError, - TimelineStatus, } from '../../../../../common/types/timeline'; import { NoteSavedObject } from '../../../../../common/types/timeline/note'; import { PinnedEventSavedObject } from '../../../../../common/types/timeline/pinned_event'; @@ -180,12 +181,11 @@ const getTimelinesFromObjects = async ( if (myTimeline != null) { const timelineNotes = myNotes.filter((n) => n.timelineId === timelineId); const timelinePinnedEventIds = myPinnedEventIds.filter((p) => p.timelineId === timelineId); + const exportedTimeline = omit('status', myTimeline); return [ ...acc, { - ...myTimeline, - status: - myTimeline.status === TimelineStatus.draft ? TimelineStatus.active : myTimeline.status, + ...exportedTimeline, ...getGlobalEventNotesByTimelineId(timelineNotes), pinnedEventIds: getPinnedEventsIdsByTimelineId(timelinePinnedEventIds), }, diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/failure_cases.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/failure_cases.ts new file mode 100644 index 00000000000000..60ba5389280c47 --- /dev/null +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/failure_cases.ts @@ -0,0 +1,377 @@ +/* + * 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 { isEmpty } from 'lodash/fp'; +import { + TimelineSavedObject, + TimelineStatus, + TimelineTypeLiteral, +} from '../../../../../common/types/timeline'; + +export const UPDATE_TIMELINE_ERROR_MESSAGE = + 'CREATE timeline with PATCH is not allowed, please use POST instead'; +export const UPDATE_TEMPLATE_TIMELINE_ERROR_MESSAGE = + "CREATE template timeline with PATCH is not allowed, please use POST instead (Given template timeline doesn't exist)"; +export const NO_MATCH_VERSION_ERROR_MESSAGE = + 'TimelineVersion conflict: The given version doesn not match with existing timeline'; +export const NO_MATCH_ID_ERROR_MESSAGE = + "Timeline id doesn't match with existing template timeline"; +export const TEMPLATE_TIMELINE_VERSION_CONFLICT_MESSAGE = 'Template timelineVersion conflict'; +export const CREATE_TIMELINE_ERROR_MESSAGE = + 'UPDATE timeline with POST is not allowed, please use PATCH instead'; +export const CREATE_TEMPLATE_TIMELINE_ERROR_MESSAGE = + 'UPDATE template timeline with POST is not allowed, please use PATCH instead'; +export const EMPTY_TITLE_ERROR_MESSAGE = 'Title cannot be empty'; +export const UPDATE_STATUS_ERROR_MESSAGE = 'Update an immutable timeline is is not allowed'; +export const CREATE_TEMPLATE_TIMELINE_WITHOUT_VERSION_ERROR_MESSAGE = + 'Create template timeline without a valid templateTimelineVersion is not allowed. Please start from 1 to create a new template timeline'; +export const CREATE_WITH_INVALID_STATUS_ERROR_MESSAGE = 'Cannot create a draft timeline'; +export const NOT_ALLOW_UPDATE_STATUS_ERROR_MESSAGE = 'Update status is not allowed'; +export const NOT_ALLOW_UPDATE_TIMELINE_TYPE_ERROR_MESSAGE = 'Update timelineType is not allowed'; +export const UPDAT_TIMELINE_VIA_IMPORT_NOT_ALLOWED_ERROR_MESSAGE = + 'Update timeline via import is not allowed'; + +const isUpdatingStatus = ( + isHandlingTemplateTimeline: boolean, + status: TimelineStatus | null | undefined, + existTimeline: TimelineSavedObject | null, + existTemplateTimeline: TimelineSavedObject | null +) => { + const obj = isHandlingTemplateTimeline ? existTemplateTimeline : existTimeline; + return obj?.status === TimelineStatus.immutable ? UPDATE_STATUS_ERROR_MESSAGE : null; +}; + +const isGivenTitleValid = (status: TimelineStatus, title: string | null | undefined) => { + return (status !== TimelineStatus.draft && !isEmpty(title)) || status === TimelineStatus.draft + ? null + : EMPTY_TITLE_ERROR_MESSAGE; +}; + +export const getImportExistingTimelineError = (id: string) => + `savedObjectId: "${id}" already exists`; + +export const commonFailureChecker = (status: TimelineStatus, title: string | null | undefined) => { + const error = [isGivenTitleValid(status, title)].filter((msg) => msg != null).join(','); + return !isEmpty(error) + ? { + body: error, + statusCode: 405, + } + : null; +}; + +const commonUpdateTemplateTimelineCheck = ( + isHandlingTemplateTimeline: boolean, + status: TimelineStatus | null | undefined, + timelineType: TimelineTypeLiteral, + version: string | null, + templateTimelineVersion: number | null, + templateTimelineId: string | null | undefined, + existTimeline: TimelineSavedObject | null, + existTemplateTimeline: TimelineSavedObject | null +) => { + if (isHandlingTemplateTimeline) { + if (existTimeline != null && timelineType !== existTimeline.timelineType) { + return { + body: NOT_ALLOW_UPDATE_TIMELINE_TYPE_ERROR_MESSAGE, + statusCode: 403, + }; + } + + if (existTemplateTimeline == null && templateTimelineVersion != null) { + // template timeline !exists + // Throw error to create template timeline in patch + return { + body: UPDATE_TEMPLATE_TIMELINE_ERROR_MESSAGE, + statusCode: 405, + }; + } + + if ( + existTimeline != null && + existTemplateTimeline != null && + existTimeline.savedObjectId !== existTemplateTimeline.savedObjectId + ) { + // Throw error you can not have a no matching between your timeline and your template timeline during an update + return { + body: NO_MATCH_ID_ERROR_MESSAGE, + statusCode: 409, + }; + } + + if ( + existTemplateTimeline != null && + existTemplateTimeline.templateTimelineVersion == null && + existTemplateTimeline.version !== version + ) { + // throw error 409 conflict timeline + return { + body: NO_MATCH_VERSION_ERROR_MESSAGE, + statusCode: 409, + }; + } + } + return null; +}; + +const commonUpdateTimelineCheck = ( + isHandlingTemplateTimeline: boolean, + status: TimelineStatus | null | undefined, + timelineType: TimelineTypeLiteral, + version: string | null, + templateTimelineVersion: number | null, + templateTimelineId: string | null | undefined, + existTimeline: TimelineSavedObject | null, + existTemplateTimeline: TimelineSavedObject | null +) => { + if (existTimeline == null) { + // timeline !exists + return { + body: UPDATE_TIMELINE_ERROR_MESSAGE, + statusCode: 405, + }; + } + + if (existTimeline?.version !== version) { + // throw error 409 conflict timeline + return { + body: NO_MATCH_VERSION_ERROR_MESSAGE, + statusCode: 409, + }; + } + + return null; +}; + +const commonUpdateCases = ( + isHandlingTemplateTimeline: boolean, + status: TimelineStatus | null | undefined, + timelineType: TimelineTypeLiteral, + version: string | null, + templateTimelineVersion: number | null, + templateTimelineId: string | null | undefined, + existTimeline: TimelineSavedObject | null, + existTemplateTimeline: TimelineSavedObject | null +) => { + if (isHandlingTemplateTimeline) { + return commonUpdateTemplateTimelineCheck( + isHandlingTemplateTimeline, + status, + timelineType, + version, + templateTimelineVersion, + templateTimelineId, + existTimeline, + existTemplateTimeline + ); + } else { + return commonUpdateTimelineCheck( + isHandlingTemplateTimeline, + status, + timelineType, + version, + templateTimelineVersion, + templateTimelineId, + existTimeline, + existTemplateTimeline + ); + } +}; + +const createTemplateTimelineCheck = ( + isHandlingTemplateTimeline: boolean, + status: TimelineStatus, + timelineType: TimelineTypeLiteral, + version: string | null, + templateTimelineVersion: number | null, + templateTimelineId: string | null | undefined, + existTimeline: TimelineSavedObject | null, + existTemplateTimeline: TimelineSavedObject | null +) => { + if (isHandlingTemplateTimeline && existTemplateTimeline != null) { + // Throw error to create template timeline in patch + return { + body: CREATE_TEMPLATE_TIMELINE_ERROR_MESSAGE, + statusCode: 405, + }; + } else if (isHandlingTemplateTimeline && templateTimelineVersion == null) { + return { + body: CREATE_TEMPLATE_TIMELINE_WITHOUT_VERSION_ERROR_MESSAGE, + statusCode: 403, + }; + } else { + return null; + } +}; + +export const checkIsUpdateViaImportFailureCases = ( + isHandlingTemplateTimeline: boolean, + status: TimelineStatus | null | undefined, + timelineType: TimelineTypeLiteral, + version: string | null, + templateTimelineVersion: number | null, + templateTimelineId: string | null | undefined, + existTimeline: TimelineSavedObject | null, + existTemplateTimeline: TimelineSavedObject | null +) => { + if (!isHandlingTemplateTimeline) { + if (existTimeline == null) { + return { body: UPDAT_TIMELINE_VIA_IMPORT_NOT_ALLOWED_ERROR_MESSAGE, statusCode: 405 }; + } else { + return { + body: getImportExistingTimelineError(existTimeline!.savedObjectId), + statusCode: 405, + }; + } + } else { + if (existTemplateTimeline != null && timelineType !== existTemplateTimeline?.timelineType) { + return { + body: NOT_ALLOW_UPDATE_TIMELINE_TYPE_ERROR_MESSAGE, + statusCode: 403, + }; + } + const isStatusValid = + ((existTemplateTimeline?.status == null || + existTemplateTimeline?.status === TimelineStatus.active) && + (status == null || status === TimelineStatus.active)) || + (existTemplateTimeline?.status != null && status === existTemplateTimeline?.status); + + if (!isStatusValid) { + return { + body: NOT_ALLOW_UPDATE_STATUS_ERROR_MESSAGE, + statusCode: 405, + }; + } + + const error = commonUpdateTemplateTimelineCheck( + isHandlingTemplateTimeline, + status, + timelineType, + version, + templateTimelineVersion, + templateTimelineId, + existTimeline, + existTemplateTimeline + ); + if (error) { + return error; + } + if ( + templateTimelineVersion != null && + existTemplateTimeline != null && + existTemplateTimeline.templateTimelineVersion != null && + existTemplateTimeline.templateTimelineVersion >= templateTimelineVersion + ) { + // Throw error you can not update a template timeline version with an old version + return { + body: TEMPLATE_TIMELINE_VERSION_CONFLICT_MESSAGE, + statusCode: 409, + }; + } + } + return null; +}; + +export const checkIsUpdateFailureCases = ( + isHandlingTemplateTimeline: boolean, + status: TimelineStatus | null | undefined, + timelineType: TimelineTypeLiteral, + version: string | null, + templateTimelineVersion: number | null, + templateTimelineId: string | null | undefined, + existTimeline: TimelineSavedObject | null, + existTemplateTimeline: TimelineSavedObject | null +) => { + const error = isUpdatingStatus( + isHandlingTemplateTimeline, + status, + existTimeline, + existTemplateTimeline + ); + if (error) { + return { + body: error, + statusCode: 403, + }; + } + return commonUpdateCases( + isHandlingTemplateTimeline, + status, + timelineType, + version, + templateTimelineVersion, + templateTimelineId, + existTimeline, + existTemplateTimeline + ); +}; + +export const checkIsCreateFailureCases = ( + isHandlingTemplateTimeline: boolean, + status: TimelineStatus, + timelineType: TimelineTypeLiteral, + version: string | null, + templateTimelineVersion: number | null, + templateTimelineId: string | null | undefined, + existTimeline: TimelineSavedObject | null, + existTemplateTimeline: TimelineSavedObject | null +) => { + if (!isHandlingTemplateTimeline && existTimeline != null) { + return { + body: CREATE_TIMELINE_ERROR_MESSAGE, + statusCode: 405, + }; + } else if (isHandlingTemplateTimeline) { + return createTemplateTimelineCheck( + isHandlingTemplateTimeline, + status, + timelineType, + version, + templateTimelineVersion, + templateTimelineId, + existTimeline, + existTemplateTimeline + ); + } else { + return null; + } +}; + +export const checkIsCreateViaImportFailureCases = ( + isHandlingTemplateTimeline: boolean, + status: TimelineStatus | null | undefined, + timelineType: TimelineTypeLiteral, + version: string | null, + templateTimelineVersion: number | null, + templateTimelineId: string | null | undefined, + existTimeline: TimelineSavedObject | null, + existTemplateTimeline: TimelineSavedObject | null +) => { + if (status === TimelineStatus.draft) { + return { + body: CREATE_WITH_INVALID_STATUS_ERROR_MESSAGE, + statusCode: 405, + }; + } + + if (!isHandlingTemplateTimeline) { + if (existTimeline != null) { + return { + body: getImportExistingTimelineError(existTimeline.savedObjectId), + statusCode: 405, + }; + } + } else { + if (existTemplateTimeline != null) { + // Throw error to create template timeline in patch + return { + body: getImportExistingTimelineError(existTemplateTimeline.savedObjectId), + statusCode: 405, + }; + } + } + + return null; +}; diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/timeline_object.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/timeline_object.ts new file mode 100644 index 00000000000000..9fb96b509ec3e8 --- /dev/null +++ b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/timeline_object.ts @@ -0,0 +1,86 @@ +/* + * 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 { + TimelineType, + TimelineTypeLiteral, + TimelineSavedObject, + TimelineStatus, +} from '../../../../../common/types/timeline'; +import { getTimeline, getTemplateTimeline } from './create_timelines'; +import { FrameworkRequest } from '../../../framework'; + +interface TimelineObjectProps { + id: string | null | undefined; + type: TimelineTypeLiteral; + version: string | number | null | undefined; + frameworkRequest: FrameworkRequest; +} + +export class TimelineObject { + public readonly id: string | null; + private type: TimelineTypeLiteral; + public readonly version: string | number | null; + private frameworkRequest: FrameworkRequest; + + public data: TimelineSavedObject | null; + + constructor({ + id = null, + type = TimelineType.default, + version = null, + frameworkRequest, + }: TimelineObjectProps) { + this.id = id; + this.type = type; + + this.version = version; + this.frameworkRequest = frameworkRequest; + this.data = null; + } + + public async getTimeline() { + this.data = + this.id != null + ? this.type === TimelineType.template + ? await getTemplateTimeline(this.frameworkRequest, this.id) + : await getTimeline(this.frameworkRequest, this.id) + : null; + + return this.data; + } + + public get getData() { + return this.data; + } + + private get isImmutable() { + return this.data?.status === TimelineStatus.immutable; + } + + public get isExists() { + return this.data != null; + } + + public get isUpdatable() { + return this.isExists && !this.isImmutable; + } + + public get isCreatable() { + return !this.isExists; + } + + public get isUpdatableViaImport() { + return this.type === TimelineType.template && this.isExists; + } + + public get getVersion() { + return this.version; + } + + public get getId() { + return this.id; + } +} diff --git a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/update_timelines.ts b/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/update_timelines.ts deleted file mode 100644 index a4efa676daddc5..00000000000000 --- a/x-pack/plugins/security_solution/server/lib/timeline/routes/utils/update_timelines.ts +++ /dev/null @@ -1,80 +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 { TimelineSavedObject } from '../../../../../common/types/timeline'; - -export const UPDATE_TIMELINE_ERROR_MESSAGE = - 'CREATE timeline with PATCH is not allowed, please use POST instead'; -export const UPDATE_TEMPLATE_TIMELINE_ERROR_MESSAGE = - 'CREATE template timeline with PATCH is not allowed, please use POST instead'; -export const NO_MATCH_VERSION_ERROR_MESSAGE = - 'TimelineVersion conflict: The given version doesn not match with existing timeline'; -export const NO_MATCH_ID_ERROR_MESSAGE = - "Timeline id doesn't match with existing template timeline"; -export const TEMPLATE_TIMELINE_VERSION_CONFLICT_MESSAGE = 'Template timelineVersion conflict'; - -export const checkIsFailureCases = ( - isHandlingTemplateTimeline: boolean, - version: string | null, - templateTimelineVersion: number | null, - existTimeline: TimelineSavedObject | null, - existTemplateTimeline: TimelineSavedObject | null -) => { - if (!isHandlingTemplateTimeline && existTimeline == null) { - return { - body: UPDATE_TIMELINE_ERROR_MESSAGE, - statusCode: 405, - }; - } else if (isHandlingTemplateTimeline && existTemplateTimeline == null) { - // Throw error to create template timeline in patch - return { - body: UPDATE_TEMPLATE_TIMELINE_ERROR_MESSAGE, - statusCode: 405, - }; - } else if ( - isHandlingTemplateTimeline && - existTimeline != null && - existTemplateTimeline != null && - existTimeline.savedObjectId !== existTemplateTimeline.savedObjectId - ) { - // Throw error you can not have a no matching between your timeline and your template timeline during an update - return { - body: NO_MATCH_ID_ERROR_MESSAGE, - statusCode: 409, - }; - } else if (!isHandlingTemplateTimeline && existTimeline?.version !== version) { - // throw error 409 conflict timeline - return { - body: NO_MATCH_VERSION_ERROR_MESSAGE, - statusCode: 409, - }; - } else if ( - isHandlingTemplateTimeline && - existTemplateTimeline != null && - existTemplateTimeline.templateTimelineVersion == null && - existTemplateTimeline.version !== version - ) { - // throw error 409 conflict timeline - return { - body: NO_MATCH_VERSION_ERROR_MESSAGE, - statusCode: 409, - }; - } else if ( - isHandlingTemplateTimeline && - templateTimelineVersion != null && - existTemplateTimeline != null && - existTemplateTimeline.templateTimelineVersion != null && - existTemplateTimeline.templateTimelineVersion !== templateTimelineVersion - ) { - // Throw error you can not update a template timeline version with an old version - return { - body: TEMPLATE_TIMELINE_VERSION_CONFLICT_MESSAGE, - statusCode: 409, - }; - } else { - return null; - } -}; diff --git a/x-pack/plugins/security_solution/server/lib/timeline/saved_object.ts b/x-pack/plugins/security_solution/server/lib/timeline/saved_object.ts index bbb11cd642c4ca..ec90fc6d8e0710 100644 --- a/x-pack/plugins/security_solution/server/lib/timeline/saved_object.ts +++ b/x-pack/plugins/security_solution/server/lib/timeline/saved_object.ts @@ -7,13 +7,20 @@ import { getOr } from 'lodash/fp'; import { SavedObjectsFindOptions } from '../../../../../../src/core/server'; -import { UNAUTHENTICATED_USER, disableTemplate } from '../../../common/constants'; +import { + UNAUTHENTICATED_USER, + disableTemplate, + enableElasticFilter, +} from '../../../common/constants'; import { NoteSavedObject } from '../../../common/types/timeline/note'; import { PinnedEventSavedObject } from '../../../common/types/timeline/pinned_event'; import { SavedTimeline, TimelineSavedObject, TimelineTypeLiteralWithNull, + TimelineStatusLiteralWithNull, + TemplateTimelineTypeLiteralWithNull, + TemplateTimelineType, } from '../../../common/types/timeline'; import { ResponseTimeline, @@ -38,6 +45,14 @@ interface ResponseTimelines { totalCount: number; } +interface AllTimelinesResponse extends ResponseTimelines { + defaultTimelineCount: number; + templateTimelineCount: number; + elasticTemplateTimelineCount: number; + customTemplateTimelineCount: number; + favoriteCount: number; +} + export interface ResponseTemplateTimeline { code?: Maybe; @@ -55,8 +70,10 @@ export interface Timeline { pageInfo: PageInfoTimeline | null, search: string | null, sort: SortTimeline | null, - timelineType: TimelineTypeLiteralWithNull - ) => Promise; + status: TimelineStatusLiteralWithNull, + timelineType: TimelineTypeLiteralWithNull, + templateTimelineType: TemplateTimelineTypeLiteralWithNull + ) => Promise; persistFavorite: ( request: FrameworkRequest, @@ -97,7 +114,7 @@ export const getTimelineByTemplateTimelineId = async ( }> => { const options: SavedObjectsFindOptions = { type: timelineSavedObjectType, - filter: `siem-ui-timeline.attributes.templateTimelineId: ${templateTimelineId}`, + filter: `siem-ui-timeline.attributes.templateTimelineId: "${templateTimelineId}"`, }; return getAllSavedTimeline(request, options); }; @@ -106,10 +123,13 @@ export const getTimelineByTemplateTimelineId = async ( * which has no timelineType exists in the savedObject */ const getTimelineTypeFilter = ( timelineType: TimelineTypeLiteralWithNull, - includeDraft: boolean + templateTimelineType: TemplateTimelineTypeLiteralWithNull, + status: TimelineStatusLiteralWithNull ) => { const typeFilter = - timelineType === TimelineType.template + timelineType == null + ? null + : timelineType === TimelineType.template ? `siem-ui-timeline.attributes.timelineType: ${TimelineType.template}` /** Show only whose timelineType exists and equals to "template" */ : /** Show me every timeline whose timelineType is not "template". * which includes timelineType === 'default' and @@ -119,10 +139,30 @@ const getTimelineTypeFilter = ( /** Show me every timeline whose status is not "draft". * which includes status === 'active' and * those status doesn't exists */ - const draftFilter = includeDraft - ? `siem-ui-timeline.attributes.status: ${TimelineStatus.draft}` - : `not siem-ui-timeline.attributes.status: ${TimelineStatus.draft}`; - return `${typeFilter} and ${draftFilter}`; + const draftFilter = + status === TimelineStatus.draft + ? `siem-ui-timeline.attributes.status: ${TimelineStatus.draft}` + : `not siem-ui-timeline.attributes.status: ${TimelineStatus.draft}`; + + const immutableFilter = + status == null + ? null + : status === TimelineStatus.immutable + ? `siem-ui-timeline.attributes.status: ${TimelineStatus.immutable}` + : `not siem-ui-timeline.attributes.status: ${TimelineStatus.immutable}`; + + const templateTimelineTypeFilter = + templateTimelineType == null + ? null + : templateTimelineType === TemplateTimelineType.elastic + ? `siem-ui-timeline.attributes.createdBy: "Elsatic"` + : `not siem-ui-timeline.attributes.createdBy: "Elastic"`; + + const filters = + !disableTemplate && enableElasticFilter + ? [typeFilter, draftFilter, immutableFilter, templateTimelineTypeFilter] + : [typeFilter, draftFilter, immutableFilter]; + return filters.filter((f) => f != null).join(' and '); }; export const getAllTimeline = async ( @@ -131,8 +171,10 @@ export const getAllTimeline = async ( pageInfo: PageInfoTimeline | null, search: string | null, sort: SortTimeline | null, - timelineType: TimelineTypeLiteralWithNull -): Promise => { + status: TimelineStatusLiteralWithNull, + timelineType: TimelineTypeLiteralWithNull, + templateTimelineType: TemplateTimelineTypeLiteralWithNull +): Promise => { const options: SavedObjectsFindOptions = { type: timelineSavedObjectType, perPage: pageInfo != null ? pageInfo.pageSize : undefined, @@ -144,13 +186,78 @@ export const getAllTimeline = async ( /** * CreateTemplateTimelineBtn * Remove the comment here to enable template timeline and apply the change below - * filter: getTimelineTypeFilter(timelineType, false) + * filter: getTimelineTypeFilter(timelineType, templateTimelineType, false) */ - filter: getTimelineTypeFilter(disableTemplate ? TimelineType.default : timelineType, false), + filter: getTimelineTypeFilter( + disableTemplate ? TimelineType.default : timelineType, + disableTemplate ? null : templateTimelineType, + disableTemplate ? null : status + ), sortField: sort != null ? sort.sortField : undefined, sortOrder: sort != null ? sort.sortOrder : undefined, }; - return getAllSavedTimeline(request, options); + + const timelineOptions = { + type: timelineSavedObjectType, + perPage: 1, + page: 1, + filter: getTimelineTypeFilter(TimelineType.default, null, TimelineStatus.active), + }; + + const templateTimelineOptions = { + type: timelineSavedObjectType, + perPage: 1, + page: 1, + filter: getTimelineTypeFilter(TimelineType.template, null, null), + }; + + const elasticTemplateTimelineOptions = { + type: timelineSavedObjectType, + perPage: 1, + page: 1, + filter: getTimelineTypeFilter( + TimelineType.template, + TemplateTimelineType.elastic, + TimelineStatus.immutable + ), + }; + + const customTemplateTimelineOptions = { + type: timelineSavedObjectType, + perPage: 1, + page: 1, + filter: getTimelineTypeFilter( + TimelineType.template, + TemplateTimelineType.custom, + TimelineStatus.active + ), + }; + + const favoriteTimelineOptions = { + type: timelineSavedObjectType, + searchFields: ['title', 'description', 'favorite.keySearch'], + perPage: 1, + page: 1, + filter: getTimelineTypeFilter(timelineType, null, TimelineStatus.active), + }; + + const result = await Promise.all([ + getAllSavedTimeline(request, options), + getAllSavedTimeline(request, timelineOptions), + getAllSavedTimeline(request, templateTimelineOptions), + getAllSavedTimeline(request, elasticTemplateTimelineOptions), + getAllSavedTimeline(request, customTemplateTimelineOptions), + getAllSavedTimeline(request, favoriteTimelineOptions), + ]); + + return Promise.resolve({ + ...result[0], + defaultTimelineCount: result[1].totalCount, + templateTimelineCount: result[2].totalCount, + elasticTemplateTimelineCount: result[3].totalCount, + customTemplateTimelineCount: result[4].totalCount, + favoriteCount: result[5].totalCount, + }); }; export const getDraftTimeline = async ( @@ -160,7 +267,11 @@ export const getDraftTimeline = async ( const options: SavedObjectsFindOptions = { type: timelineSavedObjectType, perPage: 1, - filter: getTimelineTypeFilter(timelineType, true), + filter: getTimelineTypeFilter( + timelineType, + timelineType === TimelineType.template ? TemplateTimelineType.custom : null, + TimelineStatus.draft + ), sortField: 'created', sortOrder: 'desc', }; @@ -395,7 +506,6 @@ const getAllSavedTimeline = async (request: FrameworkRequest, options: SavedObje } const savedObjects = await savedObjectsClient.find(options); - const timelinesWithNotesAndPinnedEvents = await Promise.all( savedObjects.saved_objects.map(async (savedObject) => { const timelineSaveObject = convertSavedObjectToSavedTimeline(savedObject); diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 7a1fc1b751d123..a41aeb60794284 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -8933,7 +8933,6 @@ "xpack.maps.addLayerPanel.addLayer": "レイヤーを追加", "xpack.maps.addLayerPanel.changeDataSourceButtonLabel": "レイヤーを変更", "xpack.maps.addLayerPanel.footer.cancelButtonLabel": "キャンセル", - "xpack.maps.addLayerPanel.importFile": "ファイルのインポート", "xpack.maps.aggs.defaultCountLabel": "カウント", "xpack.maps.appTitle": "マップ", "xpack.maps.blendedVectorLayer.clusteredLayerName": "クラスター化 {displayName}", @@ -9224,8 +9223,6 @@ "xpack.maps.source.esSource.requestFailedErrorMessage": "Elasticsearch 検索リクエストに失敗。エラー: {message}", "xpack.maps.source.esSource.stylePropsMetaRequestDescription": "シンボル化バンドを計算するために使用されるフィールドメタデータを取得するElasticsearchリクエスト。", "xpack.maps.source.esSource.stylePropsMetaRequestName": "{layerName} - メタデータ", - "xpack.maps.source.geojsonFileDescription": "ElasticsearchでGeoJSONデータにインデックスします", - "xpack.maps.source.geojsonFileTitle": "GeoJSONをアップロード", "xpack.maps.source.kbnRegionMap.noConfigErrorMessage": "{name} の map.regionmap 構成が見つかりません", "xpack.maps.source.kbnRegionMap.noLayerAvailableHelptext": "ベクターレイヤーが利用できません。システム管理者に、kibana.yml で「map.regionmap」を設定するよう依頼してください。", "xpack.maps.source.kbnRegionMap.vectorLayerLabel": "ベクターレイヤー", @@ -16562,7 +16559,6 @@ "xpack.uptime.locationMap.locations.missing.message": "重要な位置情報構成がありません。{codeBlock}フィールドを使用して、アップタイムチェック用に一意の地域を作成できます。", "xpack.uptime.locationMap.locations.missing.message1": "詳細については、ドキュメンテーションを参照してください。", "xpack.uptime.locationMap.locations.missing.title": "地理情報の欠測", - "xpack.uptime.locationMap.locations.tags.others": "{otherLoc}その他 ...", "xpack.uptime.locationName.helpLinkAnnotation": "場所を追加", "xpack.uptime.ml.durationChart.exploreInMlApp": "ML アプリで探索", "xpack.uptime.ml.enableAnomalyDetectionPanel.anomalyDetectionTitle": "異常検知", @@ -16646,12 +16642,7 @@ "xpack.uptime.monitorStatusBar.locations.oneLocStatus": "{loc}場所での{status}", "xpack.uptime.monitorStatusBar.locations.upStatus": "{loc}場所での{status}", "xpack.uptime.monitorStatusBar.monitorUrlLinkAriaLabel": "監視 URL リンク", - "xpack.uptime.monitorStatusBar.sslCertificate.overview": "証明書概要", "xpack.uptime.monitorStatusBar.sslCertificate.title": "証明書", - "xpack.uptime.monitorStatusBar.sslCertificateExpired.badgeContent": "{emphasizedText}が期限切れになりました", - "xpack.uptime.monitorStatusBar.sslCertificateExpired.label.ariaLabel": "{validityDate}に期限切れになりました", - "xpack.uptime.monitorStatusBar.sslCertificateExpiry.badgeContent": "{emphasizedText}が期限切れになります", - "xpack.uptime.monitorStatusBar.sslCertificateExpiry.label.ariaLabel": "{validityDate}に期限切れになります", "xpack.uptime.monitorStatusBar.timestampFromNowTextAriaLabel": "最終確認からの経過時間", "xpack.uptime.navigateToAlertingButton.content": "アラートを管理", "xpack.uptime.navigateToAlertingUi": "Uptime を離れてアラート管理ページに移動します", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index ac31a8f61cf8fd..cf39b8eb12a710 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -8937,7 +8937,6 @@ "xpack.maps.addLayerPanel.addLayer": "添加图层", "xpack.maps.addLayerPanel.changeDataSourceButtonLabel": "更改图层", "xpack.maps.addLayerPanel.footer.cancelButtonLabel": "鍙栨秷", - "xpack.maps.addLayerPanel.importFile": "导入文件", "xpack.maps.aggs.defaultCountLabel": "计数", "xpack.maps.appTitle": "Maps", "xpack.maps.blendedVectorLayer.clusteredLayerName": "集群 {displayName}", @@ -9228,8 +9227,6 @@ "xpack.maps.source.esSource.requestFailedErrorMessage": "Elasticsearch 搜索请求失败，错误：{message}", "xpack.maps.source.esSource.stylePropsMetaRequestDescription": "检索用于计算符号化带的字段元数据的 Elasticsearch 请求。", "xpack.maps.source.esSource.stylePropsMetaRequestName": "{layerName} - 元数据", - "xpack.maps.source.geojsonFileDescription": "在 Elasticsearch 索引 GeoJSON 文件", - "xpack.maps.source.geojsonFileTitle": "上传 GeoJSON", "xpack.maps.source.kbnRegionMap.noConfigErrorMessage": "找不到 {name} 的 map.regionmap 配置", "xpack.maps.source.kbnRegionMap.noLayerAvailableHelptext": "没有可用的矢量图层。让您的系统管理员在 kibana.yml 中设置“map.regionmap”。", "xpack.maps.source.kbnRegionMap.vectorLayerLabel": "矢量图层", @@ -16568,7 +16565,6 @@ "xpack.uptime.locationMap.locations.missing.message": "重要的地理位置配置缺失。您可以使用 {codeBlock} 字段为您的运行时间检查创建独特的地理区域。", "xpack.uptime.locationMap.locations.missing.message1": "在我们的文档中获取更多的信息。", "xpack.uptime.locationMap.locations.missing.title": "地理信息缺失", - "xpack.uptime.locationMap.locations.tags.others": "{otherLoc} 其他......", "xpack.uptime.locationName.helpLinkAnnotation": "添加位置", "xpack.uptime.ml.durationChart.exploreInMlApp": "在 ML 应用中浏览", "xpack.uptime.ml.enableAnomalyDetectionPanel.anomalyDetectionTitle": "异常检测", @@ -16652,12 +16648,7 @@ "xpack.uptime.monitorStatusBar.locations.oneLocStatus": "在 {loc} 位置{status}", "xpack.uptime.monitorStatusBar.locations.upStatus": "在 {loc} 位置{status}", "xpack.uptime.monitorStatusBar.monitorUrlLinkAriaLabel": "监测 URL 链接", - "xpack.uptime.monitorStatusBar.sslCertificate.overview": "证书概览", "xpack.uptime.monitorStatusBar.sslCertificate.title": "证书", - "xpack.uptime.monitorStatusBar.sslCertificateExpired.badgeContent": "{emphasizedText}过期", - "xpack.uptime.monitorStatusBar.sslCertificateExpired.label.ariaLabel": "已于 {validityDate}过期", - "xpack.uptime.monitorStatusBar.sslCertificateExpiry.badgeContent": "{emphasizedText}过期", - "xpack.uptime.monitorStatusBar.sslCertificateExpiry.label.ariaLabel": "将于 {validityDate}过期", "xpack.uptime.monitorStatusBar.timestampFromNowTextAriaLabel": "自上次检查以来经过的时间", "xpack.uptime.navigateToAlertingButton.content": "管理告警", "xpack.uptime.navigateToAlertingUi": "离开 Uptime 并前往“Alerting 管理”页面", diff --git a/x-pack/plugins/ui_actions_enhanced/kibana.json b/x-pack/plugins/ui_actions_enhanced/kibana.json index 027004f165c3b8..a813903d8b2124 100644 --- a/x-pack/plugins/ui_actions_enhanced/kibana.json +++ b/x-pack/plugins/ui_actions_enhanced/kibana.json @@ -4,7 +4,8 @@ "configPath": ["xpack", "ui_actions_enhanced"], "requiredPlugins": [ "embeddable", - "uiActions" + "uiActions", + "licensing" ], "server": false, "ui": true diff --git a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx index 745b3c403afc66..78252dccd20d24 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx @@ -7,7 +7,15 @@ import React from 'react'; import { cleanup, fireEvent, render } from '@testing-library/react/pure'; import { TEST_SUBJ_ACTION_FACTORY_ITEM, TEST_SUBJ_SELECTED_ACTION_FACTORY } from './action_wizard'; -import { dashboardFactory, dashboards, Demo, urlFactory } from './test_data'; +import { + dashboardFactory, + dashboards, + Demo, + urlFactory, + urlDrilldownActionFactory, +} from './test_data'; +import { ActionFactory } from '../../dynamic_actions'; +import { licenseMock } from '../../../../licensing/common/licensing.mock'; // TODO: afterEach is not available for it globally during setup // https://github.com/elastic/kibana/issues/59469 @@ -54,3 +62,19 @@ test('If only one actions factory is available then actionFactory selection is e // check that can't change to action factory type expect(screen.queryByTestId(/change/i)).not.toBeInTheDocument(); }); + +test('If not enough license, button is disabled', () => { + const urlWithGoldLicense = new ActionFactory( + { + ...urlDrilldownActionFactory, + minimalLicense: 'gold', + }, + () => licenseMock.createLicense() + ); + const screen = render(); + + // check that all factories are displayed to pick + expect(screen.getAllByTestId(new RegExp(TEST_SUBJ_ACTION_FACTORY_ITEM))).toHaveLength(2); + + expect(screen.getByText(/Go to URL/i)).toBeDisabled(); +}); diff --git a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx index ccadf60426edf8..6769c8bab07327 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx @@ -10,10 +10,12 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, + EuiKeyPadMenuItem, EuiSpacer, EuiText, - EuiKeyPadMenuItem, + EuiToolTip, } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; import { txtChangeButton } from './i18n'; import './action_wizard.scss'; import { ActionFactory } from '../../dynamic_actions'; @@ -61,7 +63,11 @@ export const ActionWizard: React.FC = ({ context, }) => { // auto pick action factory if there is only 1 available - if (!currentActionFactory && actionFactories.length === 1) { + if ( + !currentActionFactory && + actionFactories.length === 1 && + actionFactories[0].isCompatibleLicence() + ) { onActionFactoryChange(actionFactories[0]); } @@ -175,24 +181,46 @@ const ActionFactorySelector: React.FC = ({ willChange: 'opacity', }; + /** + * make sure not compatible factories are in the end + */ + const ensureOrder = (factories: ActionFactory[]) => { + const compatibleLicense = factories.filter((f) => f.isCompatibleLicence()); + const notCompatibleLicense = factories.filter((f) => !f.isCompatibleLicence()); + return [ + ...compatibleLicense.sort((f1, f2) => f2.order - f1.order), + ...notCompatibleLicense.sort((f1, f2) => f2.order - f1.order), + ]; + }; + return ( - {[...actionFactories] - .sort((f1, f2) => f2.order - f1.order) - .map((actionFactory) => ( - + {ensureOrder(actionFactories).map((actionFactory) => ( + + + ) + } + > onActionFactorySelected(actionFactory)} + disabled={!actionFactory.isCompatibleLicence()} > {actionFactory.getIconType(context) && ( )} - - ))} + + + ))} ); }; diff --git a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx index 0a135e60126ca9..2672a086dca735 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx @@ -10,6 +10,7 @@ import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/p import { ActionWizard } from './action_wizard'; import { ActionFactoryDefinition, ActionFactory } from '../../dynamic_actions'; import { CollectConfigProps } from '../../../../../../src/plugins/kibana_utils/public'; +import { licenseMock } from '../../../../licensing/common/licensing.mock'; type ActionBaseConfig = object; @@ -101,10 +102,13 @@ export const dashboardDrilldownActionFactory: ActionFactoryDefinition< create: () => ({ id: 'test', execute: async () => alert('Navigate to dashboard!'), + enhancements: {}, }), }; -export const dashboardFactory = new ActionFactory(dashboardDrilldownActionFactory); +export const dashboardFactory = new ActionFactory(dashboardDrilldownActionFactory, () => + licenseMock.createLicense() +); interface UrlDrilldownConfig { url: string; @@ -159,7 +163,9 @@ export const urlDrilldownActionFactory: ActionFactoryDefinition null as any, }; -export const urlFactory = new ActionFactory(urlDrilldownActionFactory); +export const urlFactory = new ActionFactory(urlDrilldownActionFactory, () => + licenseMock.createLicense() +); export function Demo({ actionFactories }: { actionFactories: Array> }) { const [state, setState] = useState<{ diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx index fbc72d04706351..20d15b4f4d2bd3 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx @@ -18,6 +18,8 @@ import { import { useContainerState } from '../../../../../../../src/plugins/kibana_utils/public'; import { DrilldownListItem } from '../list_manage_drilldowns'; import { + insufficientLicenseLevel, + invalidDrilldownType, toastDrilldownCreated, toastDrilldownDeleted, toastDrilldownEdited, @@ -133,6 +135,11 @@ export function createFlyoutManageDrilldowns({ drilldownName: drilldown.action.name, actionName: actionFactory?.getDisplayName(factoryContext) ?? drilldown.action.factoryId, icon: actionFactory?.getIconType(factoryContext), + error: !actionFactory + ? invalidDrilldownType(drilldown.action.factoryId) // this shouldn't happen for the end user, but useful during development + : !actionFactory.isCompatibleLicence() + ? insufficientLicenseLevel + : undefined, }; } diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts index e75ee2634aa43c..4b2be5db0c5584 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts @@ -86,3 +86,23 @@ export const toastDrilldownsCRUDError = i18n.translate( description: 'Title for generic error toast when persisting drilldown updates failed', } ); + +export const insufficientLicenseLevel = i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.insufficientLicenseLevelError', + { + defaultMessage: 'Insufficient license level', + description: + 'User created drilldown with higher license type, but then downgraded the license. This error is shown in the list near created drilldown', + } +); + +export const invalidDrilldownType = (type: string) => + i18n.translate( + 'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.invalidDrilldownType', + { + defaultMessage: "Drilldown type {type} doesn't exist", + values: { + type, + }, + } + ); diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.story.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.story.tsx index 0529f0451b16a0..603de39bc89081 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.story.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_list_manage_drilldowns/flyout_list_manage_drilldowns.story.tsx @@ -15,7 +15,7 @@ storiesOf('components/FlyoutListManageDrilldowns', module).add('default', () => drilldowns={[ { id: '1', actionName: 'Dashboard', drilldownName: 'Drilldown 1' }, { id: '2', actionName: 'Dashboard', drilldownName: 'Drilldown 2' }, - { id: '3', actionName: 'Dashboard', drilldownName: 'Drilldown 3' }, + { id: '3', actionName: 'Dashboard', drilldownName: 'Drilldown 3', error: 'Some error...' }, ]} /> diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx index 622ed58e3625d7..e7e7f72dbf58f4 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx @@ -5,11 +5,14 @@ */ import React from 'react'; -import { EuiFieldText, EuiForm, EuiFormRow, EuiSpacer } from '@elastic/eui'; +import { EuiFieldText, EuiForm, EuiFormRow, EuiLink, EuiSpacer, EuiText } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; import { txtDrilldownAction, txtNameOfDrilldown, txtUntitledDrilldown } from './i18n'; import { ActionFactory } from '../../../dynamic_actions'; import { ActionWizard } from '../../../components/action_wizard'; +const GET_MORE_ACTIONS_LINK = 'https://www.elastic.co/subscriptions'; + const noopFn = () => {}; export interface FormDrilldownWizardProps { @@ -49,10 +52,32 @@ export const FormDrilldownWizard: React.FC = ({ ); + const hasNotCompatibleLicenseFactory = () => + actionFactories?.some((f) => !f.isCompatibleLicence()); + + const renderGetMoreActionsLink = () => ( + + + + + + ); + const actionWizard = ( 1 ? txtDrilldownAction : undefined} fullWidth={true} + labelAppend={ + !currentActionFactory && hasNotCompatibleLicenseFactory() && renderGetMoreActionsLink() + } > { @@ -67,3 +67,8 @@ test('Can delete drilldowns', () => { expect(fn).toBeCalledWith([drilldowns[1].id, drilldowns[2].id]); }); + +test('Error is displayed', () => { + const screen = render(); + expect(screen.getByLabelText('an error')).toBeInTheDocument(); +}); diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.tsx index cd41a3d6ec23a4..b828c4d7d076da 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.tsx @@ -14,6 +14,7 @@ import { EuiIcon, EuiSpacer, EuiTextColor, + EuiToolTip, } from '@elastic/eui'; import React, { useState } from 'react'; import { @@ -28,6 +29,7 @@ export interface DrilldownListItem { actionName: string; drilldownName: string; icon?: string; + error?: string; } export interface ListManageDrilldownsProps { @@ -52,11 +54,27 @@ export function ListManageDrilldowns({ const columns: Array> = [ { - field: 'drilldownName', name: 'Name', truncateText: true, width: '50%', 'data-test-subj': 'drilldownListItemName', + render: (drilldown: DrilldownListItem) => ( +
+ {drilldown.drilldownName}{' '} + {drilldown.error && ( + + + + )} +
+ ), }, { name: 'Action', diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/drilldown_definition.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/drilldown_definition.ts index f01dd22c06bc54..a41ae851e185b0 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/drilldown_definition.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/drilldown_definition.ts @@ -5,6 +5,7 @@ */ import { ActionFactoryDefinition } from '../dynamic_actions'; +import { LicenseType } from '../../../licensing/public'; /** * This is a convenience interface to register a drilldown. Drilldown has @@ -28,6 +29,12 @@ export interface DrilldownDefinition< */ id: string; + /** + * Minimal licence level + * Empty means no restrictions + */ + minimalLicense?: LicenseType; + /** * Determines the display order of the drilldowns in the flyout picker. * Higher numbers are displayed first. diff --git a/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory.test.ts b/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory.test.ts new file mode 100644 index 00000000000000..918c6422546f40 --- /dev/null +++ b/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory.test.ts @@ -0,0 +1,46 @@ +/* + * 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 { ActionFactory } from './action_factory'; +import { ActionFactoryDefinition } from './action_factory_definition'; +import { licensingMock } from '../../../licensing/public/mocks'; + +const def: ActionFactoryDefinition = { + id: 'ACTION_FACTORY_1', + CollectConfig: {} as any, + createConfig: () => ({}), + isConfigValid: (() => true) as any, + create: ({ name }) => ({ + id: '', + execute: async () => {}, + getDisplayName: () => name, + enhancements: {}, + }), +}; + +describe('License & ActionFactory', () => { + test('no license requirements', async () => { + const factory = new ActionFactory(def, () => licensingMock.createLicense()); + expect(await factory.isCompatible({})).toBe(true); + expect(factory.isCompatibleLicence()).toBe(true); + }); + + test('not enough license level', async () => { + const factory = new ActionFactory({ ...def, minimalLicense: 'gold' }, () => + licensingMock.createLicense() + ); + expect(await factory.isCompatible({})).toBe(true); + expect(factory.isCompatibleLicence()).toBe(false); + }); + + test('enough license level', async () => { + const factory = new ActionFactory({ ...def, minimalLicense: 'gold' }, () => + licensingMock.createLicense({ license: { type: 'gold' } }) + ); + expect(await factory.isCompatible({})).toBe(true); + expect(factory.isCompatibleLicence()).toBe(true); + }); +}); diff --git a/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory.ts b/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory.ts index 262a5ef7d4561c..95b7941b48ed35 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory.ts @@ -5,13 +5,12 @@ */ import { uiToReactComponent } from '../../../../../src/plugins/kibana_react/public'; -import { - UiActionsActionDefinition as ActionDefinition, - UiActionsPresentable as Presentable, -} from '../../../../../src/plugins/ui_actions/public'; +import { UiActionsPresentable as Presentable } from '../../../../../src/plugins/ui_actions/public'; import { ActionFactoryDefinition } from './action_factory_definition'; import { Configurable } from '../../../../../src/plugins/kibana_utils/public'; import { SerializedAction } from './types'; +import { ILicense } from '../../../licensing/public'; +import { UiActionsActionDefinition as ActionDefinition } from '../../../../../src/plugins/ui_actions/public'; export class ActionFactory< Config extends object = object, @@ -19,10 +18,12 @@ export class ActionFactory< ActionContext extends object = object > implements Omit, 'getHref'>, Configurable { constructor( - protected readonly def: ActionFactoryDefinition + protected readonly def: ActionFactoryDefinition, + protected readonly getLicence: () => ILicense ) {} public readonly id = this.def.id; + public readonly minimalLicense = this.def.minimalLicense; public readonly order = this.def.order || 0; public readonly MenuItem? = this.def.MenuItem; public readonly ReactMenuItem? = this.MenuItem ? uiToReactComponent(this.MenuItem) : undefined; @@ -51,9 +52,26 @@ export class ActionFactory< return await this.def.isCompatible(context); } + /** + * Does this action factory licence requirements + * compatible with current license? + */ + public isCompatibleLicence() { + if (!this.minimalLicense) return true; + return this.getLicence().hasAtLeast(this.minimalLicense); + } + public create( serializedAction: Omit, 'factoryId'> ): ActionDefinition { - return this.def.create(serializedAction); + const action = this.def.create(serializedAction); + return { + ...action, + isCompatible: async (context: ActionContext): Promise => { + if (!this.isCompatibleLicence()) return false; + if (!action.isCompatible) return true; + return action.isCompatible(context); + }, + }; } } diff --git a/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory_definition.ts b/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory_definition.ts index d3751fe8116655..d63f69ba5ab729 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory_definition.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/action_factory_definition.ts @@ -4,12 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ +import { Configurable } from '../../../../../src/plugins/kibana_utils/public'; +import { SerializedAction } from './types'; +import { LicenseType } from '../../../licensing/public'; import { UiActionsActionDefinition as ActionDefinition, UiActionsPresentable as Presentable, } from '../../../../../src/plugins/ui_actions/public'; -import { Configurable } from '../../../../../src/plugins/kibana_utils/public'; -import { SerializedAction } from './types'; /** * This is a convenience interface for registering new action factories. @@ -28,6 +29,12 @@ export interface ActionFactoryDefinition< */ id: string; + /** + * Minimal licence level + * Empty means no licence restrictions + */ + readonly minimalLicense?: LicenseType; + /** * This method should return a definition of a new action, normally used to * register it in `ui_actions` registry. diff --git a/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/dynamic_action_manager.test.ts b/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/dynamic_action_manager.test.ts index 516b1f3cd27738..930f88ff08775c 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/dynamic_action_manager.test.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/dynamic_action_manager.test.ts @@ -7,11 +7,12 @@ import { DynamicActionManager } from './dynamic_action_manager'; import { ActionStorage, MemoryActionStorage } from './dynamic_action_storage'; import { UiActionsService } from '../../../../../src/plugins/ui_actions/public'; -import { ActionInternal } from '../../../../../src/plugins/ui_actions/public/actions'; +import { ActionRegistry } from '../../../../../src/plugins/ui_actions/public/types'; import { of } from '../../../../../src/plugins/kibana_utils'; import { UiActionsServiceEnhancements } from '../services'; import { ActionFactoryDefinition } from './action_factory_definition'; import { SerializedAction, SerializedEvent } from './types'; +import { licensingMock } from '../../../licensing/public/mocks'; const actionFactoryDefinition1: ActionFactoryDefinition = { id: 'ACTION_FACTORY_1', @@ -67,14 +68,21 @@ const event3: SerializedEvent = { }, }; -const setup = (events: readonly SerializedEvent[] = []) => { +const setup = ( + events: readonly SerializedEvent[] = [], + { getLicenseInfo = () => licensingMock.createLicense() } = { + getLicenseInfo: () => licensingMock.createLicense(), + } +) => { const isCompatible = async () => true; const storage: ActionStorage = new MemoryActionStorage(events); - const actions = new Map(); + const actions: ActionRegistry = new Map(); const uiActions = new UiActionsService({ actions, }); - const uiActionsEnhancements = new UiActionsServiceEnhancements(); + const uiActionsEnhancements = new UiActionsServiceEnhancements({ + getLicenseInfo, + }); const manager = new DynamicActionManager({ isCompatible, storage, @@ -95,6 +103,9 @@ const setup = (events: readonly SerializedEvent[] = []) => { }; describe('DynamicActionManager', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); test('can instantiate', () => { const { manager } = setup([event1]); expect(manager).toBeInstanceOf(DynamicActionManager); @@ -103,11 +114,11 @@ describe('DynamicActionManager', () => { describe('.start()', () => { test('instantiates stored events', async () => { const { manager, actions, uiActions } = setup([event1]); - const create1 = jest.fn(); - const create2 = jest.fn(); + const create1 = jest.spyOn(actionFactoryDefinition1, 'create'); + const create2 = jest.spyOn(actionFactoryDefinition2, 'create'); - uiActions.registerActionFactory({ ...actionFactoryDefinition1, create: create1 }); - uiActions.registerActionFactory({ ...actionFactoryDefinition2, create: create2 }); + uiActions.registerActionFactory(actionFactoryDefinition1); + uiActions.registerActionFactory(actionFactoryDefinition2); expect(create1).toHaveBeenCalledTimes(0); expect(create2).toHaveBeenCalledTimes(0); @@ -122,11 +133,11 @@ describe('DynamicActionManager', () => { test('does nothing when no events stored', async () => { const { manager, actions, uiActions } = setup(); - const create1 = jest.fn(); - const create2 = jest.fn(); + const create1 = jest.spyOn(actionFactoryDefinition1, 'create'); + const create2 = jest.spyOn(actionFactoryDefinition2, 'create'); - uiActions.registerActionFactory({ ...actionFactoryDefinition1, create: create1 }); - uiActions.registerActionFactory({ ...actionFactoryDefinition2, create: create2 }); + uiActions.registerActionFactory(actionFactoryDefinition1); + uiActions.registerActionFactory(actionFactoryDefinition2); expect(create1).toHaveBeenCalledTimes(0); expect(create2).toHaveBeenCalledTimes(0); @@ -207,11 +218,9 @@ describe('DynamicActionManager', () => { describe('.stop()', () => { test('removes events from UI actions registry', async () => { const { manager, actions, uiActions } = setup([event1, event2]); - const create1 = jest.fn(); - const create2 = jest.fn(); - uiActions.registerActionFactory({ ...actionFactoryDefinition1, create: create1 }); - uiActions.registerActionFactory({ ...actionFactoryDefinition2, create: create2 }); + uiActions.registerActionFactory(actionFactoryDefinition1); + uiActions.registerActionFactory(actionFactoryDefinition2); expect(actions.size).toBe(0); @@ -632,4 +641,42 @@ describe('DynamicActionManager', () => { }); }); }); + + test('revived actions incompatible when license is not enough', async () => { + const getLicenseInfo = jest.fn(() => + licensingMock.createLicense({ license: { type: 'basic' } }) + ); + const { manager, uiActions } = setup([event1, event3], { getLicenseInfo }); + const basicActionFactory: ActionFactoryDefinition = { + ...actionFactoryDefinition1, + minimalLicense: 'basic', + }; + + const goldActionFactory: ActionFactoryDefinition = { + ...actionFactoryDefinition2, + minimalLicense: 'gold', + }; + + uiActions.registerActionFactory(basicActionFactory); + uiActions.registerActionFactory(goldActionFactory); + + await manager.start(); + + const basicActions = await uiActions.getTriggerCompatibleActions( + 'VALUE_CLICK_TRIGGER', + {} as any + ); + expect(basicActions).toHaveLength(1); + + getLicenseInfo.mockImplementation(() => + licensingMock.createLicense({ license: { type: 'gold' } }) + ); + + const basicAndGoldActions = await uiActions.getTriggerCompatibleActions( + 'VALUE_CLICK_TRIGGER', + {} as any + ); + + expect(basicAndGoldActions).toHaveLength(2); + }); }); diff --git a/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/dynamic_action_manager.ts b/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/dynamic_action_manager.ts index 58344026079e79..4afefe3006a43c 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/dynamic_action_manager.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/dynamic_actions/dynamic_action_manager.ts @@ -72,14 +72,18 @@ export class DynamicActionManager { const { uiActions, isCompatible } = this.params; const actionId = this.generateActionId(eventId); + const factory = uiActions.getActionFactory(event.action.factoryId); - const actionDefinition: ActionDefinition = { - ...factory.create(action as SerializedAction), + const actionDefinition: ActionDefinition = factory.create(action as SerializedAction); + uiActions.registerAction({ + ...actionDefinition, id: actionId, - isCompatible, - }; - - uiActions.registerAction(actionDefinition); + isCompatible: async (context) => { + if (!(await isCompatible(context))) return false; + if (!actionDefinition.isCompatible) return true; + return actionDefinition.isCompatible(context); + }, + }); for (const trigger of triggers) uiActions.attachAction(trigger as any, actionId); } diff --git a/x-pack/plugins/ui_actions_enhanced/public/mocks.ts b/x-pack/plugins/ui_actions_enhanced/public/mocks.ts index 196b8f2c1d5c79..ff07d6e74a9c0b 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/mocks.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/mocks.ts @@ -10,6 +10,7 @@ import { uiActionsPluginMock } from '../../../../src/plugins/ui_actions/public/m import { embeddablePluginMock } from '../../../../src/plugins/embeddable/public/mocks'; import { AdvancedUiActionsSetup, AdvancedUiActionsStart } from '.'; import { plugin as pluginInitializer } from '.'; +import { licensingMock } from '../../licensing/public/mocks'; export type Setup = jest.Mocked; export type Start = jest.Mocked; @@ -62,6 +63,7 @@ const createPlugin = ( return plugin.start(anotherCoreStart, { uiActions: uiActionsStart, embeddable: embeddableStart, + licensing: licensingMock.createStart(), }); }, }; diff --git a/x-pack/plugins/ui_actions_enhanced/public/plugin.ts b/x-pack/plugins/ui_actions_enhanced/public/plugin.ts index 04caef92f15a22..a625ea2e2118bc 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/plugin.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/plugin.ts @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ +import { BehaviorSubject, Subscription } from 'rxjs'; import { PluginInitializerContext, CoreSetup, @@ -31,6 +32,7 @@ import { } from './custom_time_range_badge'; import { CommonlyUsedRange } from './types'; import { UiActionsServiceEnhancements } from './services'; +import { ILicense, LicensingPluginStart } from '../../licensing/public'; import { createFlyoutManageDrilldowns } from './drilldowns'; import { Storage } from '../../../../src/plugins/kibana_utils/public'; @@ -42,6 +44,7 @@ interface SetupDependencies { interface StartDependencies { embeddable: EmbeddableStart; uiActions: UiActionsStart; + licensing: LicensingPluginStart; } export interface SetupContract @@ -63,7 +66,19 @@ declare module '../../../../src/plugins/ui_actions/public' { export class AdvancedUiActionsPublicPlugin implements Plugin { - private readonly enhancements = new UiActionsServiceEnhancements(); + readonly licenceInfo = new BehaviorSubject(undefined); + private getLicenseInfo(): ILicense { + if (!this.licenceInfo.getValue()) { + throw new Error( + 'AdvancedUiActionsPublicPlugin: Licence is not ready! Licence becomes available only after setup.' + ); + } + return this.licenceInfo.getValue()!; + } + private readonly enhancements = new UiActionsServiceEnhancements({ + getLicenseInfo: () => this.getLicenseInfo(), + }); + private subs: Subscription[] = []; constructor(initializerContext: PluginInitializerContext) {} @@ -74,7 +89,9 @@ export class AdvancedUiActionsPublicPlugin }; } - public start(core: CoreStart, { uiActions }: StartDependencies): StartContract { + public start(core: CoreStart, { uiActions, licensing }: StartDependencies): StartContract { + this.subs.push(licensing.license$.subscribe(this.licenceInfo)); + const dateFormat = core.uiSettings.get('dateFormat') as string; const commonlyUsedRanges = core.uiSettings.get( UI_SETTINGS.TIMEPICKER_QUICK_RANGES @@ -106,5 +123,7 @@ export class AdvancedUiActionsPublicPlugin }; } - public stop() {} + public stop() { + this.subs.forEach((s) => s.unsubscribe()); + } } diff --git a/x-pack/plugins/ui_actions_enhanced/public/services/ui_actions_service_enhancements.test.ts b/x-pack/plugins/ui_actions_enhanced/public/services/ui_actions_service_enhancements.test.ts index 3137e35a2fe476..4f2ddcf7e0491c 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/services/ui_actions_service_enhancements.test.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/services/ui_actions_service_enhancements.test.ts @@ -6,6 +6,9 @@ import { UiActionsServiceEnhancements } from './ui_actions_service_enhancements'; import { ActionFactoryDefinition, ActionFactory } from '../dynamic_actions'; +import { licensingMock } from '../../../licensing/public/mocks'; + +const getLicenseInfo = () => licensingMock.createLicense(); describe('UiActionsService', () => { describe('action factories', () => { @@ -25,7 +28,7 @@ describe('UiActionsService', () => { }; test('.getActionFactories() returns empty array if no action factories registered', () => { - const service = new UiActionsServiceEnhancements(); + const service = new UiActionsServiceEnhancements({ getLicenseInfo }); const factories = service.getActionFactories(); @@ -33,7 +36,7 @@ describe('UiActionsService', () => { }); test('can register and retrieve an action factory', () => { - const service = new UiActionsServiceEnhancements(); + const service = new UiActionsServiceEnhancements({ getLicenseInfo }); service.registerActionFactory(factoryDefinition1); @@ -44,7 +47,7 @@ describe('UiActionsService', () => { }); test('can retrieve all action factories', () => { - const service = new UiActionsServiceEnhancements(); + const service = new UiActionsServiceEnhancements({ getLicenseInfo }); service.registerActionFactory(factoryDefinition1); service.registerActionFactory(factoryDefinition2); @@ -58,7 +61,7 @@ describe('UiActionsService', () => { }); test('throws when retrieving action factory that does not exist', () => { - const service = new UiActionsServiceEnhancements(); + const service = new UiActionsServiceEnhancements({ getLicenseInfo }); service.registerActionFactory(factoryDefinition1); diff --git a/x-pack/plugins/ui_actions_enhanced/public/services/ui_actions_service_enhancements.ts b/x-pack/plugins/ui_actions_enhanced/public/services/ui_actions_service_enhancements.ts index b7bdced228584a..bd05659d59e9d8 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/services/ui_actions_service_enhancements.ts +++ b/x-pack/plugins/ui_actions_enhanced/public/services/ui_actions_service_enhancements.ts @@ -7,16 +7,20 @@ import { ActionFactoryRegistry } from '../types'; import { ActionFactory, ActionFactoryDefinition } from '../dynamic_actions'; import { DrilldownDefinition } from '../drilldowns'; +import { ILicense } from '../../../licensing/common/types'; export interface UiActionsServiceEnhancementsParams { readonly actionFactories?: ActionFactoryRegistry; + readonly getLicenseInfo: () => ILicense; } export class UiActionsServiceEnhancements { protected readonly actionFactories: ActionFactoryRegistry; + protected readonly getLicenseInfo: () => ILicense; - constructor({ actionFactories = new Map() }: UiActionsServiceEnhancementsParams = {}) { + constructor({ actionFactories = new Map(), getLicenseInfo }: UiActionsServiceEnhancementsParams) { this.actionFactories = actionFactories; + this.getLicenseInfo = getLicenseInfo; } /** @@ -34,7 +38,10 @@ export class UiActionsServiceEnhancements { throw new Error(`ActionFactory [actionFactory.id = ${definition.id}] already registered.`); } - const actionFactory = new ActionFactory(definition); + const actionFactory = new ActionFactory( + definition, + this.getLicenseInfo + ); this.actionFactories.set(actionFactory.id, actionFactory as ActionFactory); }; @@ -72,9 +79,11 @@ export class UiActionsServiceEnhancements { euiIcon, execute, getHref, + minimalLicense, }: DrilldownDefinition): void => { const actionFactory: ActionFactoryDefinition = { id: factoryId, + minimalLicense, order, CollectConfig, createConfig, diff --git a/x-pack/plugins/uptime/common/runtime_types/common.ts b/x-pack/plugins/uptime/common/runtime_types/common.ts index e07c46fa01cfe9..603d242d4dcd04 100644 --- a/x-pack/plugins/uptime/common/runtime_types/common.ts +++ b/x-pack/plugins/uptime/common/runtime_types/common.ts @@ -6,15 +6,19 @@ import * as t from 'io-ts'; -export const LocationType = t.partial({ +export const LocationType = t.type({ lat: t.string, lon: t.string, }); -export const CheckGeoType = t.partial({ - name: t.string, - location: LocationType, -}); +export const CheckGeoType = t.intersection([ + t.type({ + name: t.string, + }), + t.partial({ + location: LocationType, + }), +]); export const SummaryType = t.partial({ up: t.number, @@ -34,5 +38,6 @@ export const DateRangeType = t.type({ export type Summary = t.TypeOf; export type Location = t.TypeOf; +export type GeoPoint = t.TypeOf; export type StatesIndexStatus = t.TypeOf; export type DateRange = t.TypeOf; diff --git a/x-pack/plugins/uptime/common/runtime_types/monitor/locations.ts b/x-pack/plugins/uptime/common/runtime_types/monitor/locations.ts index ea3cfe677ca991..00ed1dc407e98f 100644 --- a/x-pack/plugins/uptime/common/runtime_types/monitor/locations.ts +++ b/x-pack/plugins/uptime/common/runtime_types/monitor/locations.ts @@ -7,17 +7,23 @@ import * as t from 'io-ts'; import { CheckGeoType, SummaryType } from '../common'; // IO type for validation -export const MonitorLocationType = t.partial({ +export const MonitorLocationType = t.type({ + up_history: t.number, + down_history: t.number, + timestamp: t.string, summary: SummaryType, geo: CheckGeoType, - timestamp: t.string, }); // Typescript type for type checking export type MonitorLocation = t.TypeOf; export const MonitorLocationsType = t.intersection([ - t.type({ monitorId: t.string }), + t.type({ + monitorId: t.string, + up_history: t.number, + down_history: t.number, + }), t.partial({ locations: t.array(MonitorLocationType) }), ]); export type MonitorLocations = t.TypeOf; diff --git a/x-pack/plugins/uptime/public/components/certificates/translations.ts b/x-pack/plugins/uptime/public/components/certificates/translations.ts index 518eddf1211a4f..176625d647ca0e 100644 --- a/x-pack/plugins/uptime/public/components/certificates/translations.ts +++ b/x-pack/plugins/uptime/public/components/certificates/translations.ts @@ -18,6 +18,10 @@ export const EXPIRES_SOON = i18n.translate('xpack.uptime.certs.expireSoon', { defaultMessage: 'Expires soon', }); +export const EXPIRES = i18n.translate('xpack.uptime.certs.expires', { + defaultMessage: 'Expires', +}); + export const SEARCH_CERTS = i18n.translate('xpack.uptime.certs.searchCerts', { defaultMessage: 'Search certificates', }); diff --git a/x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx b/x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx index a6bb097de45ad7..a1e23ab8b38a72 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx +++ b/x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; import { i18n } from '@kbn/i18n'; import moment from 'moment'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -26,6 +26,7 @@ import { getTickFormat } from './get_tick_format'; import { ChartEmptyState } from './chart_empty_state'; import { DurationAnomaliesBar } from './duration_line_bar_list'; import { AnomalyRecords } from '../../../state/actions'; +import { UptimeThemeContext } from '../../../contexts'; interface DurationChartProps { /** @@ -59,6 +60,8 @@ export const DurationChartComponent = ({ const [hiddenLegends, setHiddenLegends] = useState([]); + const { chartTheme } = useContext(UptimeThemeContext); + const onBrushEnd: BrushEndListener = ({ x }) => { if (!x) { return; @@ -93,6 +96,7 @@ export const DurationChartComponent = ({ legendPosition={Position.Bottom} onBrushEnd={onBrushEnd} onLegendItemClick={legendToggleVisibility} + {...chartTheme} /> { const { colors: { danger }, + chartTheme, } = useContext(UptimeThemeContext); const [getUrlParams, updateUrlParams] = useUrlParams(); const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams(); @@ -62,6 +63,7 @@ export const MonitorBarSeries = ({ histogramSeries }: MonitorBarSeriesProps) => = ({ }) => { const { colors: { danger, gray }, + chartTheme, } = useContext(UptimeThemeContext); const [, updateUrlParams] = useUrlParams(); @@ -128,6 +129,7 @@ export const PingHistogramComponent: React.FC = ({ }} showLegend={false} onBrushEnd={onBrushEnd} + {...chartTheme} /> - - - - - - - - - - - - - -`; - -exports[`LocationMap component renders correctly against snapshot 1`] = ` - - - - - - - - - - - - - - - -`; - -exports[`LocationMap component renders named locations that have missing geo data 1`] = ` - - - - - - - - - - - - - - - -`; - -exports[`LocationMap component shows warning if geo information is missing 1`] = ` - - - - - - - - - - - - - - - -`; diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/__snapshots__/location_status_tags.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/__snapshots__/location_status_tags.test.tsx.snap deleted file mode 100644 index f2a390792918ae..00000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/__snapshots__/location_status_tags.test.tsx.snap +++ /dev/null @@ -1,682 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LocationStatusTags component renders properly against props 1`] = ` - - - - - - - - Berlin - - - - - - 1 Mon ago - - - - - - - - - - Berlin - - - - - - 1 Mon ago - - - - - - - - Islamabad - - - - - - 1 Mon ago - - - - - - -`; - -exports[`LocationStatusTags component renders when all locations are down 1`] = ` -.c3 { - display: inline-block; - margin-left: 4px; -} - -.c2 { - font-weight: 600; -} - -.c1 { - margin-bottom: 5px; - white-space: nowrap; -} - -.c0 { - max-height: 229px; - overflow: hidden; - margin-top: auto; -} - -@media (max-width:1042px) { - .c1 { - display: inline-block; - margin-right: 16px; - } -} - -
- -
- - - -
-
- Islamabad -
-
- - - - -
-
- 5s ago -
-
- -
-
- - - -
-
- Berlin -
-
- - - - -
-
- 5m ago -
-
- -
- - -
-`; - -exports[`LocationStatusTags component renders when all locations are up 1`] = ` -.c3 { - display: inline-block; - margin-left: 4px; -} - -.c2 { - font-weight: 600; -} - -.c1 { - margin-bottom: 5px; - white-space: nowrap; -} - -.c0 { - max-height: 229px; - overflow: hidden; - margin-top: auto; -} - -@media (max-width:1042px) { - .c1 { - display: inline-block; - margin-right: 16px; - } -} - -
- - -
- - - -
-
- Berlin -
-
- - - - -
-
- 5d ago -
-
- -
-
- - - -
-
- Islamabad -
-
- - - - -
-
- 5s ago -
-
- -
- -
-`; - -exports[`LocationStatusTags component renders when there are many location 1`] = ` -Array [ - .c3 { - display: inline-block; - margin-left: 4px; -} - -.c2 { - font-weight: 600; -} - -.c1 { - margin-bottom: 5px; - white-space: nowrap; -} - -.c0 { - max-height: 229px; - overflow: hidden; - margin-top: auto; -} - -@media (max-width:1042px) { - .c1 { - display: inline-block; - margin-right: 16px; - } -} - -
- -
- - - -
-
- Islamabad -
-
- - - - -
-
- 5s ago -
-
- -
-
- - - -
-
- Berlin -
-
- - - - -
-
- 5m ago -
-
- -
-
- - - -
-
- st-paul -
-
- - - - -
-
- 5h ago -
-
- -
-
- - - -
-
- Tokyo -
-
- - - - -
-
- 5d ago -
-
- -
-
- - - -
-
- New York -
-
- - - - -
-
- 1 Mon ago -
-
- -
-
- - - -
-
- Toronto -
-
- - - - -
-
- 5 Mon ago -
-
- -
-
- - - -
-
- Sydney -
-
- - - - -
-
- 5 Yr ago -
-
- -
-
- - - -
-
- Paris -
-
- - - - -
-
- 5 Yr ago -
-
- -
- - -
, - .c0 { - padding-left: 18px; -} - -@media (max-width:1042px) { - -} - -
-
-
-

- 1 Others ... -

-
-
-
, -] -`; diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/location_map.tsx b/x-pack/plugins/uptime/public/components/monitor/location_map/location_map.tsx deleted file mode 100644 index 916f1cbb63e534..00000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/location_map.tsx +++ /dev/null @@ -1,95 +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 styled from 'styled-components'; -import { EuiFlexGroup, EuiFlexItem, EuiErrorBoundary, EuiHideFor } from '@elastic/eui'; -import { LocationStatusTags } from './location_status_tags'; -import { EmbeddedMap, LocationPoint } from './embeddables/embedded_map'; -import { MonitorLocations, MonitorLocation } from '../../../../common/runtime_types'; -import { UNNAMED_LOCATION } from '../../../../common/constants'; -import { LocationMissingWarning } from './location_missing'; - -// These height/width values are used to make sure map is in center of panel -// And to make sure, it doesn't take too much space -const MapPanel = styled.div` - height: 240px; - width: 520px; - @media (min-width: 1300px) { - margin-right: 20px; - } - @media (max-width: 574px) { - height: 250px; - width: 100%; - margin-right: 0; - } -`; - -const EuiFlexItemTags = styled(EuiFlexItem)` - padding-top: 5px; - @media (max-width: 1042px) { - flex-basis: 80% !important; - flex-grow: 0 !important; - order: 1; - } -`; - -const FlexGroup = styled(EuiFlexGroup)` - @media (max-width: 850px) { - justify-content: center; - } -`; - -interface LocationMapProps { - monitorLocations: MonitorLocations; -} - -export const LocationMap = ({ monitorLocations }: LocationMapProps) => { - const upPoints: LocationPoint[] = []; - const downPoints: LocationPoint[] = []; - - let isGeoInfoMissing = false; - - if (monitorLocations?.locations) { - monitorLocations.locations.forEach((item: MonitorLocation) => { - if (item.geo?.name === UNNAMED_LOCATION || !item.geo?.location) { - isGeoInfoMissing = true; - } else if ( - item.geo?.name !== UNNAMED_LOCATION && - !!item.geo.location.lat && - !!item.geo.location.lon - ) { - // TypeScript doesn't infer that the above checks in this block's condition - // ensure that lat and lon are defined when we try to pass the location object directly, - // but if we destructure the values it does. Improvement to this block is welcome. - const { lat, lon } = item.geo.location; - if (item?.summary?.down === 0) { - upPoints.push({ lat, lon }); - } else { - downPoints.push({ lat, lon }); - } - } - }); - } - - return ( - - - - - - - - {isGeoInfoMissing && } - - - - - - - - ); -}; diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/location_status_tags.tsx b/x-pack/plugins/uptime/public/components/monitor/location_map/location_status_tags.tsx deleted file mode 100644 index db84fd5e2ca425..00000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/location_status_tags.tsx +++ /dev/null @@ -1,130 +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, { useContext } from 'react'; -import moment from 'moment'; -import styled from 'styled-components'; -import { EuiBadge, EuiText } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; -import { UptimeThemeContext } from '../../../contexts'; -import { MonitorLocation } from '../../../../common/runtime_types'; -import { SHORT_TIMESPAN_LOCALE, SHORT_TS_LOCALE } from '../../../../common/constants'; - -const TimeStampSpan = styled.span` - display: inline-block; - margin-left: 4px; -`; - -const TextStyle = styled.div` - font-weight: 600; -`; - -const BadgeItem = styled.div` - margin-bottom: 5px; - white-space: nowrap; - @media (max-width: 1042px) { - display: inline-block; - margin-right: 16px; - } -`; - -// Set height so that it remains within panel, enough height to display 7 locations tags -const TagContainer = styled.div` - max-height: 229px; - overflow: hidden; - margin-top: auto; -`; - -const OtherLocationsDiv = styled.div` - padding-left: 18px; -`; - -interface Props { - locations: MonitorLocation[]; -} - -interface StatusTag { - label: string; - timestamp: number; -} - -export const LocationStatusTags = ({ locations }: Props) => { - const { - colors: { gray, danger }, - } = useContext(UptimeThemeContext); - - const upLocations: StatusTag[] = []; - const downLocations: StatusTag[] = []; - - locations.forEach((item: any) => { - if (item.summary.down === 0) { - upLocations.push({ label: item.geo.name, timestamp: new Date(item.timestamp).valueOf() }); - } else { - downLocations.push({ label: item.geo.name, timestamp: new Date(item.timestamp).valueOf() }); - } - }); - - // Sort lexicographically by label - upLocations.sort((a, b) => { - return a.label > b.label ? 1 : b.label > a.label ? -1 : 0; - }); - - const tagLabel = (item: StatusTag, ind: number, color: string) => { - return ( - - - - {item.label} - - - - {moment(item.timestamp).fromNow()} - - - ); - }; - - const prevLocal: string = moment.locale() ?? 'en'; - - const renderTags = () => { - const shortLocale = moment.locale(SHORT_TS_LOCALE) === SHORT_TS_LOCALE; - if (!shortLocale) { - moment.defineLocale(SHORT_TS_LOCALE, SHORT_TIMESPAN_LOCALE); - } - - const tags = ( - - {downLocations.map((item, ind) => tagLabel(item, ind, danger))} - {upLocations.map((item, ind) => tagLabel(item, ind, gray))} - - ); - - // Need to reset locale so it doesn't effect other parts of the app - moment.locale(prevLocal); - return tags; - }; - - return ( - <> - {renderTags()} - {locations.length > 7 && ( - - -

- -

- - - )} - - ); -}; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/__snapshots__/monitor_status.bar.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/__snapshots__/monitor_status.bar.test.tsx.snap deleted file mode 100644 index ff63b3695fb8df..00000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/__snapshots__/monitor_status.bar.test.tsx.snap +++ /dev/null @@ -1,55 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MonitorStatusBar component renders duration in ms, not us 1`] = ` -
-
-
-

- Up in 2 Locations -

-
-
-
-
- - https://www.example.com/ - -
-
-
- -

- id1 -

- -
-
-
-
-`; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/ssl_certificate.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/ssl_certificate.tsx deleted file mode 100644 index 73b58e8a33f6ba..00000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/ssl_certificate.tsx +++ /dev/null @@ -1,100 +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 { i18n } from '@kbn/i18n'; -import { Link } from 'react-router-dom'; -import { EuiSpacer, EuiText, EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; -import { Tls } from '../../../../../common/runtime_types'; -import { useCertStatus } from '../../../../hooks'; -import { CERT_STATUS, CERTIFICATES_ROUTE } from '../../../../../common/constants'; - -interface Props { - /** - * TLS information coming from monitor in ES heartbeat index - */ - tls: Tls | null | undefined; -} - -export const MonitorSSLCertificate = ({ tls }: Props) => { - const certStatus = useCertStatus(tls?.not_after); - - const isExpiringSoon = certStatus === CERT_STATUS.EXPIRING_SOON; - - const isExpired = certStatus === CERT_STATUS.EXPIRED; - - const relativeDate = moment(tls?.not_after).fromNow(); - - return certStatus ? ( - <> - - {i18n.translate('xpack.uptime.monitorStatusBar.sslCertificate.title', { - defaultMessage: 'Certificate:', - })} - - - - - - {isExpired ? ( - {relativeDate}, - }} - /> - ) : ( - - {relativeDate} - - ), - }} - /> - )} - - - - - - {i18n.translate('xpack.uptime.monitorStatusBar.sslCertificate.overview', { - defaultMessage: 'Certificate overview', - })} - - - - - - ) : null; -}; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/status_bar.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/status_bar.tsx deleted file mode 100644 index 36159dc29eccde..00000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/status_bar.tsx +++ /dev/null @@ -1,61 +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 { - EuiLink, - EuiTitle, - EuiTextColor, - EuiSpacer, - EuiText, - EuiFlexGroup, - EuiFlexItem, -} from '@elastic/eui'; -import { MonitorSSLCertificate } from './ssl_certificate'; -import * as labels from './translations'; -import { StatusByLocations } from './status_by_location'; -import { Ping } from '../../../../../common/runtime_types'; -import { MonitorLocations } from '../../../../../common/runtime_types'; - -interface MonitorStatusBarProps { - monitorId: string; - monitorStatus: Ping | null; - monitorLocations: MonitorLocations; -} - -export const MonitorStatusBarComponent: React.FC = ({ - monitorId, - monitorStatus, - monitorLocations, -}) => { - const full = monitorStatus?.url?.full ?? ''; - - return ( - - - - - - - - {full} - - - - - - -

{monitorId}

- - - - - - - - - ); -}; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/translations.ts b/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/translations.ts deleted file mode 100644 index f60a1ceeaafb84..00000000000000 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/translations.ts +++ /dev/null @@ -1,50 +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 { i18n } from '@kbn/i18n'; - -export const healthStatusMessageAriaLabel = i18n.translate( - 'xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel', - { - defaultMessage: 'Monitor status', - } -); - -export const upLabel = i18n.translate('xpack.uptime.monitorStatusBar.healthStatusMessage.upLabel', { - defaultMessage: 'Up', -}); - -export const downLabel = i18n.translate( - 'xpack.uptime.monitorStatusBar.healthStatusMessage.downLabel', - { - defaultMessage: 'Down', - } -); - -export const monitorUrlLinkAriaLabel = i18n.translate( - 'xpack.uptime.monitorStatusBar.monitorUrlLinkAriaLabel', - { - defaultMessage: 'Monitor URL link', - } -); - -export const durationTextAriaLabel = i18n.translate( - 'xpack.uptime.monitorStatusBar.durationTextAriaLabel', - { - defaultMessage: 'Monitor duration in milliseconds', - } -); - -export const timestampFromNowTextAriaLabel = i18n.translate( - 'xpack.uptime.monitorStatusBar.timestampFromNowTextAriaLabel', - { - defaultMessage: 'Time since last check', - } -); - -export const loadingMessage = i18n.translate('xpack.uptime.monitorStatusBar.loadingMessage', { - defaultMessage: 'Loading…', -}); diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/__snapshots__/monitor_status.bar.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/__snapshots__/monitor_status.bar.test.tsx.snap new file mode 100644 index 00000000000000..d53f338b60aedb --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/__snapshots__/monitor_status.bar.test.tsx.snap @@ -0,0 +1,73 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MonitorStatusBar component renders 1`] = ` +Array [ +
+
+

+ Up in 2 Locations +

+
+
, +
, + .c0.c0.c0 { + width: 35%; +} + +.c1.c1.c1 { + width: 65%; + overflow-wrap: anywhere; +} + +
+
+ Overall availability +
+
+ 0.00 % +
+
+ Url +
+
+ + +
+ +
+
+ Monitor ID +
+
+
, +] +`; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/__snapshots__/ssl_certificate.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/__snapshots__/ssl_certificate.test.tsx.snap similarity index 61% rename from x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/__snapshots__/ssl_certificate.test.tsx.snap rename to x-pack/plugins/uptime/public/components/monitor/status_details/__test__/__snapshots__/ssl_certificate.test.tsx.snap index 628e1d576181eb..5b63a09d4f7c4b 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/__snapshots__/ssl_certificate.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/__snapshots__/ssl_certificate.test.tsx.snap @@ -2,61 +2,91 @@ exports[`SSL Certificate component renders 1`] = ` Array [ -
- Certificate: -
, + TLS Certificate + ,
, -
-
-
- Expires - - - - in 2 months - - - -
-
-
-
- Certificate overview +
+

+ Expires in 2 months +

- -
-
, + + + , ] `; -exports[`SSL Certificate component renders null if invalid date 1`] = `null`; +exports[`SSL Certificate component renders null if invalid date 1`] = ` +Array [ + .c0.c0.c0 { + width: 35%; +} + +
+ TLS Certificate +
, +
, + .c0.c0.c0 { + width: 65%; + overflow-wrap: anywhere; +} + +
+ + + -- + + +
, +] +`; exports[`SSL Certificate component shallow renders 1`] = ` { let monitorStatus: Ping; @@ -49,18 +50,21 @@ describe('MonitorStatusBar component', () => { const spy = jest.spyOn(redux, 'useDispatch'); spy.mockReturnValue(jest.fn()); - const spy1 = jest.spyOn(redux, 'useSelector'); - spy1.mockReturnValue(true); + jest.spyOn(redux, 'useSelector').mockImplementation((fn, d) => { + if (fn.name === ' monitorStatusSelector') { + return monitorStatus; + } else { + return monitorLocations; + } + }); }); - it('renders duration in ms, not us', () => { - const component = renderWithIntl( - - ); + it('renders', () => { + const history = createMemoryHistory({ + initialEntries: ['/aWQx/'], + }); + history.location.key = 'test'; + const component = renderWithRouter(, history); expect(component).toMatchSnapshot(); }); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/ssl_certificate.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/ssl_certificate.test.tsx similarity index 75% rename from x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/ssl_certificate.test.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/__test__/ssl_certificate.test.tsx index e8ffc3bf26c425..a4b360ea690d09 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/ssl_certificate.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/ssl_certificate.test.tsx @@ -6,9 +6,9 @@ import React from 'react'; import moment from 'moment'; -import { EuiBadge } from '@elastic/eui'; +import { EuiIcon } from '@elastic/eui'; import { Tls } from '../../../../../common/runtime_types'; -import { MonitorSSLCertificate } from '../monitor_status_bar'; +import { MonitorSSLCertificate } from '../status_bar'; import * as redux from 'react-redux'; import { mountWithRouter, renderWithRouter, shallowWithRouter } from '../../../../lib'; import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../../../common/constants'; @@ -58,14 +58,12 @@ describe('SSL Certificate component', () => { }; const component = mountWithRouter(); - const badgeComponent = component.find(EuiBadge); + const lockIcon = component.find(EuiIcon); - expect(badgeComponent.props().color).toBe('warning'); + expect(lockIcon.props().color).toBe('warning'); - const badgeComponentText = component.find('.euiBadge__text'); - expect(badgeComponentText.text()).toBe(moment(dateIn5Days).fromNow()); - - expect(badgeComponent.find('span.euiBadge--warning')).toBeTruthy(); + const componentText = component.find('h4'); + expect(componentText.text()).toBe('Expires soon ' + moment(dateIn5Days).fromNow()); }); it('does not render the expiration date with a warning state if expiry date is greater than a month', () => { @@ -75,12 +73,10 @@ describe('SSL Certificate component', () => { }; const component = mountWithRouter(); - const badgeComponent = component.find(EuiBadge); - expect(badgeComponent.props().color).toBe('default'); - - const badgeComponentText = component.find('.euiBadge__text'); - expect(badgeComponentText.text()).toBe(moment(dateIn40Days).fromNow()); + const lockIcon = component.find(EuiIcon); + expect(lockIcon.props().color).toBe('success'); - expect(badgeComponent.find('span.euiBadge--warning')).toHaveLength(0); + const componentText = component.find('h4'); + expect(componentText.text()).toBe('Expires ' + moment(dateIn40Days).fromNow()); }); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/status_by_location.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/status_by_location.test.tsx similarity index 77% rename from x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/status_by_location.test.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/__test__/status_by_location.test.tsx index b2619825311d70..b171a8bedb8a7f 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/status_by_location.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/__test__/status_by_location.test.tsx @@ -17,10 +17,16 @@ describe('StatusByLocation component', () => { { summary: { up: 4, down: 0 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, + up_history: 4, + down_history: 0, + timestamp: '2020-01-13T22:50:06.536Z', }, { summary: { up: 4, down: 0 }, geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } }, + up_history: 4, + down_history: 0, + timestamp: '2020-01-13T22:50:06.536Z', }, ]; const component = shallowWithIntl(); @@ -32,10 +38,16 @@ describe('StatusByLocation component', () => { { summary: { up: 4, down: 0 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, + up_history: 4, + down_history: 0, + timestamp: '2020-01-13T22:50:06.536Z', }, { summary: { up: 4, down: 0 }, geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } }, + up_history: 4, + down_history: 0, + timestamp: '2020-01-13T22:50:06.536Z', }, ]; const component = renderWithIntl(); @@ -47,6 +59,9 @@ describe('StatusByLocation component', () => { { summary: { up: 4, down: 0 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, + up_history: 4, + down_history: 0, + timestamp: '2020-01-13T22:50:06.536Z', }, ]; const component = renderWithIntl(); @@ -58,6 +73,9 @@ describe('StatusByLocation component', () => { { summary: { up: 0, down: 4 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, + up_history: 4, + down_history: 0, + timestamp: '2020-01-13T22:50:06.536Z', }, ]; const component = renderWithIntl(); @@ -69,10 +87,16 @@ describe('StatusByLocation component', () => { { summary: { up: 0, down: 4 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, + up_history: 4, + down_history: 0, + timestamp: '2020-01-13T22:50:06.536Z', }, { summary: { up: 0, down: 4 }, geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } }, + up_history: 4, + down_history: 0, + timestamp: '2020-01-13T22:50:06.536Z', }, ]; const component = renderWithIntl(); @@ -84,10 +108,16 @@ describe('StatusByLocation component', () => { { summary: { up: 0, down: 4 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, + up_history: 4, + down_history: 0, + timestamp: '2020-01-13T22:50:06.536Z', }, { summary: { up: 4, down: 0 }, geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } }, + up_history: 4, + down_history: 0, + timestamp: '2020-01-13T22:50:06.536Z', }, ]; const component = renderWithIntl(); diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap new file mode 100644 index 00000000000000..9496274a691711 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/availability_reporting.test.tsx.snap @@ -0,0 +1,381 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AvailabilityReporting component renders correctly against snapshot 1`] = ` +Array [ + @media (max-width:1042px) { + +} + +
, + .c0 { + white-space: nowrap; + display: inline-block; +} + +@media (max-width:1042px) { + .c0 { + display: inline-block; + margin-right: 16px; + } +} + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + Location + +
+ 		+
+ + Availability + +
+ 		+
+ + Last check + +
+
+
+ Location +
+
+
+ + + +
+

+ au-heartbeat +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 36m ago + +
+
+
+ Location +
+
+
+ + + +
+

+ nyc-heartbeat +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 36m ago + +
+
+
+ Location +
+
+
+ + + +
+

+ spa-heartbeat +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 36m ago + +
+
+
+
, +] +`; + +exports[`AvailabilityReporting component shallow renders correctly against snapshot 1`] = ` + + + + +`; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap new file mode 100644 index 00000000000000..05e0b50a86f359 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/location_status_tags.test.tsx.snap @@ -0,0 +1,1085 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LocationStatusTags component renders properly against props 1`] = ` + + + + + +`; + +exports[`LocationStatusTags component renders when all locations are down 1`] = ` +.c1 { + white-space: nowrap; + display: inline-block; +} + +.c0 { + max-height: 246px; + overflow: hidden; +} + +@media (max-width:1042px) { + .c1 { + display: inline-block; + margin-right: 16px; + } +} + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
+
+
+ + Location + +
+ 		+
+ + Availability + +
+ 		+
+ + Last check + +
+
+
+ Location +
+
+
+ + + +
+

+ Berlin +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 5m ago + +
+
+
+ Location +
+
+
+ + + +
+

+ Islamabad +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 5s ago + +
+
+
+
+
+`; + +exports[`LocationStatusTags component renders when all locations are up 1`] = ` +.c1 { + white-space: nowrap; + display: inline-block; +} + +.c0 { + max-height: 246px; + overflow: hidden; +} + +@media (max-width:1042px) { + .c1 { + display: inline-block; + margin-right: 16px; + } +} + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
+
+
+ + Location + +
+ 		+
+ + Availability + +
+ 		+
+ + Last check + +
+
+
+ Location +
+
+
+ + + +
+

+ Berlin +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 5d ago + +
+
+
+ Location +
+
+
+ + + +
+

+ Islamabad +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 5s ago + +
+
+
+
+
+`; + +exports[`LocationStatusTags component renders when there are many location 1`] = ` +.c1 { + white-space: nowrap; + display: inline-block; +} + +.c0 { + max-height: 246px; + overflow: hidden; +} + +@media (max-width:1042px) { + .c1 { + display: inline-block; + margin-right: 16px; + } +} + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + Location + +
+ 		+
+ + Availability + +
+ 		+
+ + Last check + +
+
+
+ Location +
+
+
+ + + +
+

+ Berlin +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 5m ago + +
+
+
+ Location +
+
+
+ + + +
+

+ Islamabad +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 5s ago + +
+
+
+ Location +
+
+
+ + + +
+

+ New York +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 1 Mon ago + +
+
+
+ Location +
+
+
+ + + +
+

+ Paris +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 5 Yr ago + +
+
+
+ Location +
+
+
+ + + +
+

+ Sydney +

+
+ + + +
+
+ 		+
+ Availability +
+
+ + 100.00 % + +
+ 		+
+ Last check +
+
+ + 5 Yr ago + +
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+`; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap new file mode 100644 index 00000000000000..3381efa62286b3 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/__snapshots__/tag_label.test.tsx.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TagLabel component renders correctly against snapshot 1`] = ` +.c0 { + white-space: nowrap; + display: inline-block; +} + +@media (max-width:1042px) { + .c0 { + display: inline-block; + margin-right: 16px; + } +} + +
+ + + +
+

+ US-East +

+
+ + + +
+`; + +exports[`TagLabel component shallow render correctly against snapshot 1`] = ` + + + +

+ US-East +

+ + + +`; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/availability_reporting.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/availability_reporting.test.tsx new file mode 100644 index 00000000000000..de9f6b0d3b30f7 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/availability_reporting.test.tsx @@ -0,0 +1,42 @@ +/* + * 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 { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { AvailabilityReporting } from '../availability_reporting'; +import { StatusTag } from '../location_status_tags'; + +describe('AvailabilityReporting component', () => { + let allLocations: StatusTag[]; + + beforeEach(() => { + allLocations = [ + { + label: 'au-heartbeat', + timestamp: '36m ago', + color: '#d3dae6', + availability: 100, + }, + { + label: 'nyc-heartbeat', + timestamp: '36m ago', + color: '#d3dae6', + availability: 100, + }, + { label: 'spa-heartbeat', timestamp: '36m ago', color: '#d3dae6', availability: 100 }, + ]; + }); + + it('shallow renders correctly against snapshot', () => { + const component = shallowWithIntl(); + expect(component).toMatchSnapshot(); + }); + + it('renders correctly against snapshot', () => { + const component = renderWithIntl(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/location_status_tags.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/location_status_tags.test.tsx similarity index 84% rename from x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/location_status_tags.test.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/location_status_tags.test.tsx index 28b44824017935..bfeaa6085e9985 100644 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/location_status_tags.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/location_status_tags.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; import moment from 'moment'; import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers'; -import { MonitorLocation } from '../../../../../common/runtime_types/monitor'; +import { MonitorLocation } from '../../../../../../common/runtime_types/monitor'; import { LocationStatusTags } from '../index'; describe('LocationStatusTags component', () => { @@ -19,16 +19,22 @@ describe('LocationStatusTags component', () => { summary: { up: 4, down: 0 }, geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'w').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 4, down: 0 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'w').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 0, down: 2 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'w').toISOString(), + up_history: 4, + down_history: 0, }, ]; const component = shallowWithIntl(); @@ -41,41 +47,57 @@ describe('LocationStatusTags component', () => { summary: { up: 0, down: 1 }, geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 's').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'm').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'h').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'Tokyo', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'd').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'New York', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'w').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'Toronto', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'M').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'Sydney', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'y').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 0, down: 1 }, geo: { name: 'Paris', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'y').toISOString(), + up_history: 4, + down_history: 0, }, ]; const component = renderWithIntl(); @@ -88,11 +110,15 @@ describe('LocationStatusTags component', () => { summary: { up: 4, down: 0 }, geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 's').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 4, down: 0 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'd').toISOString(), + up_history: 4, + down_history: 0, }, ]; const component = renderWithIntl(); @@ -105,11 +131,15 @@ describe('LocationStatusTags component', () => { summary: { up: 0, down: 2 }, geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 's').toISOString(), + up_history: 4, + down_history: 0, }, { summary: { up: 0, down: 2 }, geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: moment().subtract('5', 'm').toISOString(), + up_history: 4, + down_history: 0, }, ]; const component = renderWithIntl(); diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/tag_label.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/tag_label.test.tsx new file mode 100644 index 00000000000000..3560784122298c --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__tests__/tag_label.test.tsx @@ -0,0 +1,21 @@ +/* + * 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 { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { TagLabel } from '../tag_label'; + +describe('TagLabel component', () => { + it('shallow render correctly against snapshot', () => { + const component = shallowWithIntl(); + expect(component).toMatchSnapshot(); + }); + + it('renders correctly against snapshot', () => { + const component = renderWithIntl(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx new file mode 100644 index 00000000000000..8fed5db5e0271b --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/availability_reporting.tsx @@ -0,0 +1,87 @@ +/* + * 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, { useState } from 'react'; +import { EuiBasicTable, EuiSpacer } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar'; +import { StatusTag } from './location_status_tags'; +import { TagLabel } from './tag_label'; +import { AvailabilityLabel, LastCheckLabel, LocationLabel } from '../translations'; + +interface Props { + allLocations: StatusTag[]; +} + +export const formatAvailabilityValue = (val: number) => { + const result = Math.round(val * 100) / 100; + return result.toFixed(2); +}; + +export const AvailabilityReporting: React.FC = ({ allLocations }) => { + const [pageIndex, setPageIndex] = useState(0); + + const cols = [ + { + field: 'label', + name: LocationLabel, + truncateText: true, + render: (val: string, item: StatusTag) => { + return ; + }, + }, + { + field: 'availability', + name: AvailabilityLabel, + align: 'right' as const, + render: (val: number) => { + return ( + + + + ); + }, + }, + { + name: LastCheckLabel, + field: 'timestamp', + align: 'right' as const, + }, + ]; + const pageSize = 5; + + const pagination: Pagination = { + pageIndex, + pageSize, + totalItemCount: allLocations.length, + hidePerPageOptions: true, + }; + + const onTableChange = ({ page }: any) => { + setPageIndex(page.index); + }; + + const paginationProps = allLocations.length > pageSize ? { pagination } : {}; + + return ( + <> + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/index.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/index.ts new file mode 100644 index 00000000000000..fb42a162522a83 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/index.ts @@ -0,0 +1,9 @@ +/* + * 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. + */ + +export { AvailabilityReporting } from './availability_reporting'; +export { LocationStatusTags } from './location_status_tags'; +export { TagLabel } from './tag_label'; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx new file mode 100644 index 00000000000000..6096499213a10e --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/location_status_tags.tsx @@ -0,0 +1,73 @@ +/* + * 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, { useContext } from 'react'; +import moment from 'moment'; +import styled from 'styled-components'; +import { UptimeThemeContext } from '../../../../contexts'; +import { MonitorLocation } from '../../../../../common/runtime_types'; +import { SHORT_TIMESPAN_LOCALE, SHORT_TS_LOCALE } from '../../../../../common/constants'; +import { AvailabilityReporting } from '../index'; + +// Set height so that it remains within panel, enough height to display 7 locations tags +const TagContainer = styled.div` + max-height: 246px; + overflow: hidden; +`; + +interface Props { + locations: MonitorLocation[]; +} + +export interface StatusTag { + label: string; + timestamp: string; + color: string; + availability: number; +} + +export const LocationStatusTags = ({ locations }: Props) => { + const { + colors: { gray, danger }, + } = useContext(UptimeThemeContext); + + const allLocations: StatusTag[] = []; + const prevLocal: string = moment.locale() ?? 'en'; + + const shortLocale = moment.locale(SHORT_TS_LOCALE) === SHORT_TS_LOCALE; + if (!shortLocale) { + moment.defineLocale(SHORT_TS_LOCALE, SHORT_TIMESPAN_LOCALE); + } + + locations.forEach((item: MonitorLocation) => { + allLocations.push({ + label: item.geo.name!, + timestamp: moment(new Date(item.timestamp).valueOf()).fromNow(), + color: item.summary.down === 0 ? gray : danger, + availability: (item.up_history / (item.up_history + item.down_history)) * 100, + }); + }); + + // Need to reset locale so it doesn't effect other parts of the app + moment.locale(prevLocal); + + // Sort lexicographically by label + allLocations.sort((a, b) => { + return a.label > b.label ? 1 : b.label > a.label ? -1 : 0; + }); + + if (allLocations.length === 0) { + return null; + } + + return ( + <> + + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx new file mode 100644 index 00000000000000..dbd73fc7d440b7 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/tag_label.tsx @@ -0,0 +1,35 @@ +/* + * 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 styled from 'styled-components'; +import { EuiBadge, EuiText } from '@elastic/eui'; + +const BadgeItem = styled.div` + white-space: nowrap; + display: inline-block; + @media (max-width: 1042px) { + display: inline-block; + margin-right: 16px; + } +`; + +interface Props { + color: string; + label: string; +} + +export const TagLabel: React.FC = ({ color, label }) => { + return ( + + + +

{label}

+ + + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/index.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/index.ts similarity index 63% rename from x-pack/plugins/uptime/public/components/monitor/monitor_status_details/index.ts rename to x-pack/plugins/uptime/public/components/monitor/status_details/index.ts index e95f14472e9e84..ae3a07d231da3f 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/index.ts +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/index.ts @@ -4,9 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ -export { MonitorStatusBarComponent } from './monitor_status_bar'; export { MonitorStatusDetailsComponent } from './status_details'; -export { StatusByLocations } from './monitor_status_bar/status_by_location'; +export { StatusByLocations } from './status_bar/status_by_location'; export { MonitorStatusDetails } from './status_details_container'; -export { MonitorStatusBar } from './monitor_status_bar/status_bar_container'; +export { MonitorStatusBar } from './status_bar/status_bar'; +export { AvailabilityReporting } from './availability_reporting/availability_reporting'; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/__tests__/__snapshots__/location_availability.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/__tests__/__snapshots__/location_availability.test.tsx.snap new file mode 100644 index 00000000000000..517dd45cdfdc6f --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/__tests__/__snapshots__/location_availability.test.tsx.snap @@ -0,0 +1,280 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LocationAvailability component doesnt shows warning if geo is provided 1`] = ` + + + + +

+ Monitoring from +

+ + + + + + + + + + + + +`; + +exports[`LocationAvailability component renders correctly against snapshot 1`] = ` + + + + +

+ Monitoring from +

+ + + + + + + + + + + + +`; + +exports[`LocationAvailability component renders named locations that have missing geo data 1`] = ` + + + + +

+ Monitoring from +

+ + + + + + + + + + + + +`; + +exports[`LocationAvailability component shows warning if geo information is missing 1`] = ` + + + + + + + + + + + + + + + +`; diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/location_map.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/__tests__/location_availability.test.tsx similarity index 57% rename from x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/location_map.test.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/__tests__/location_availability.test.tsx index 1913e677dd674d..52a5dd10664cfa 100644 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/location_map.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/__tests__/location_availability.test.tsx @@ -6,59 +6,105 @@ import React from 'react'; import { shallowWithIntl } from 'test_utils/enzyme_helpers'; -import { LocationMap } from '../location_map'; -import { MonitorLocations } from '../../../../../common/runtime_types'; -import { LocationMissingWarning } from '../location_missing'; +import { LocationAvailability } from '../location_availability'; +import { MonitorLocations } from '../../../../../../common/runtime_types'; +import { LocationMissingWarning } from '../../location_map/location_missing'; + +class LocalStorageMock { + store: Record; + constructor() { + this.store = { 'xpack.uptime.detailPage.selectedView': 'list' }; + } + + clear() { + this.store = {}; + } + + getItem(key: string) { + return this.store[key] || null; + } + + setItem(key: string, value: string) { + this.store[key] = value.toString(); + } + + removeItem(key: string) { + delete this.store[key]; + } +} // Note For shallow test, we need absolute time strings -describe('LocationMap component', () => { +describe('LocationAvailability component', () => { let monitorLocations: MonitorLocations; beforeEach(() => { + // @ts-ignore replacing a call to localStorage we use for monitor list size + global.localStorage = new LocalStorageMock(); + + // @ts-ignore replacing a call to localStorage we use for monitor list size + global.localStorage.setItem('xpack.uptime.detailPage.selectedView', 'list'); + monitorLocations = { monitorId: 'wapo', + up_history: 12, + down_history: 0, locations: [ { summary: { up: 4, down: 0 }, geo: { name: 'New York', location: { lat: '40.730610', lon: ' -73.935242' } }, timestamp: '2020-01-13T22:50:06.536Z', + up_history: 4, + down_history: 0, }, { summary: { up: 4, down: 0 }, geo: { name: 'Tokyo', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: '2020-01-13T22:50:04.354Z', + up_history: 4, + down_history: 0, }, { summary: { up: 4, down: 0 }, geo: { name: 'Unnamed-location' }, timestamp: '2020-01-13T22:50:02.753Z', + up_history: 4, + down_history: 0, }, ], }; }); it('renders correctly against snapshot', () => { - const component = shallowWithIntl(); + const component = shallowWithIntl(); expect(component).toMatchSnapshot(); }); it('shows warning if geo information is missing', () => { + // @ts-ignore replacing a call to localStorage we use for monitor list size + global.localStorage.setItem('xpack.uptime.detailPage.selectedView', 'map'); + monitorLocations = { monitorId: 'wapo', + up_history: 8, + down_history: 0, locations: [ { summary: { up: 4, down: 0 }, geo: { name: 'Tokyo', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: '2020-01-13T22:50:04.354Z', + up_history: 4, + down_history: 0, }, { summary: { up: 4, down: 0 }, geo: { name: 'Unnamed-location' }, timestamp: '2020-01-13T22:50:02.753Z', + up_history: 4, + down_history: 0, }, ], }; - const component = shallowWithIntl(); + const component = shallowWithIntl(); expect(component).toMatchSnapshot(); const warningComponent = component.find(LocationMissingWarning); @@ -68,20 +114,26 @@ describe('LocationMap component', () => { it('doesnt shows warning if geo is provided', () => { monitorLocations = { monitorId: 'wapo', + up_history: 8, + down_history: 0, locations: [ { summary: { up: 4, down: 0 }, geo: { name: 'New York', location: { lat: '40.730610', lon: ' -73.935242' } }, timestamp: '2020-01-13T22:50:06.536Z', + up_history: 4, + down_history: 0, }, { summary: { up: 4, down: 0 }, geo: { name: 'Tokyo', location: { lat: '52.487448', lon: ' 13.394798' } }, timestamp: '2020-01-13T22:50:04.354Z', + up_history: 4, + down_history: 0, }, ], }; - const component = shallowWithIntl(); + const component = shallowWithIntl(); expect(component).toMatchSnapshot(); const warningComponent = component.find(LocationMissingWarning); @@ -91,16 +143,20 @@ describe('LocationMap component', () => { it('renders named locations that have missing geo data', () => { monitorLocations = { monitorId: 'wapo', + up_history: 4, + down_history: 0, locations: [ { summary: { up: 4, down: 0 }, geo: { name: 'New York', location: undefined }, timestamp: '2020-01-13T22:50:06.536Z', + up_history: 4, + down_history: 0, }, ], }; - const component = shallowWithIntl(); + const component = shallowWithIntl(); expect(component).toMatchSnapshot(); }); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/location_availability.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/location_availability.tsx new file mode 100644 index 00000000000000..89b969fdcf691f --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/location_availability.tsx @@ -0,0 +1,90 @@ +/* + * 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, { useState } from 'react'; +import styled from 'styled-components'; +import { EuiFlexGroup, EuiFlexItem, EuiErrorBoundary, EuiTitle } from '@elastic/eui'; +import { LocationStatusTags } from '../availability_reporting'; +import { LocationPoint } from '../location_map/embeddables/embedded_map'; +import { MonitorLocations, MonitorLocation } from '../../../../../common/runtime_types'; +import { UNNAMED_LOCATION } from '../../../../../common/constants'; +import { LocationMissingWarning } from '../location_map/location_missing'; +import { useSelectedView } from './use_selected_view'; +import { LocationMap } from '../location_map'; +import { MonitoringFrom } from '../translations'; +import { ToggleViewBtn } from './toggle_view_btn'; + +const EuiFlexItemTags = styled(EuiFlexItem)` + width: 350px; + @media (max-width: 1042px) { + width: 100%; + } +`; + +interface LocationMapProps { + monitorLocations: MonitorLocations; +} + +export const LocationAvailability = ({ monitorLocations }: LocationMapProps) => { + const upPoints: LocationPoint[] = []; + const downPoints: LocationPoint[] = []; + + let isAnyGeoInfoMissing = false; + + if (monitorLocations?.locations) { + monitorLocations.locations.forEach(({ geo, summary }: MonitorLocation) => { + if (geo?.name === UNNAMED_LOCATION || !geo?.location) { + isAnyGeoInfoMissing = true; + } else if (!!geo.location.lat && !!geo.location.lon) { + if (summary?.down === 0) { + upPoints.push(geo as LocationPoint); + } else { + downPoints.push(geo as LocationPoint); + } + } + }); + } + const { selectedView: initialView } = useSelectedView(); + + const [selectedView, setSelectedView] = useState(initialView); + + return ( + + + {selectedView === 'list' && ( + + +

{MonitoringFrom}

+ + + )} + {selectedView === 'map' && ( + {isAnyGeoInfoMissing && } + )} + + { + setSelectedView(val); + }} + /> + + + + + {selectedView === 'list' && ( + + + + )} + {selectedView === 'map' && ( + + + + )} + + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/toggle_view_btn.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/toggle_view_btn.tsx new file mode 100644 index 00000000000000..dfce583945cce4 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/toggle_view_btn.tsx @@ -0,0 +1,61 @@ +/* + * 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 * as React from 'react'; +import styled from 'styled-components'; +import { EuiButtonGroup } from '@elastic/eui'; +import { useSelectedView } from './use_selected_view'; +import { ChangeToListView, ChangeToMapView } from '../translations'; + +const ToggleViewButtons = styled.span` + margin-left: auto; +`; + +interface Props { + onChange: (val: string) => void; +} + +export const ToggleViewBtn = ({ onChange }: Props) => { + const toggleButtons = [ + { + id: `listBtn`, + label: ChangeToMapView, + name: 'listView', + iconType: 'list', + 'data-test-subj': 'uptimeMonitorToggleListBtn', + 'aria-label': ChangeToMapView, + }, + { + id: `mapBtn`, + label: ChangeToListView, + name: 'mapView', + iconType: 'mapMarker', + 'data-test-subj': 'uptimeMonitorToggleMapBtn', + 'aria-label': ChangeToListView, + }, + ]; + + const { selectedView, setSelectedView } = useSelectedView(); + + const onChangeView = (optionId: string) => { + const currView = optionId === 'listBtn' ? 'list' : 'map'; + setSelectedView(currView); + onChange(currView); + }; + + return ( + + onChangeView(id)} + type="multi" + isIconOnly + style={{ marginLeft: 'auto' }} + /> + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/use_selected_view.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/use_selected_view.ts new file mode 100644 index 00000000000000..f132f502666f0a --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_availability/use_selected_view.ts @@ -0,0 +1,26 @@ +/* + * 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 { useEffect, useState } from 'react'; + +const localKey = 'xpack.uptime.detailPage.selectedView'; + +interface Props { + selectedView: string; + setSelectedView: (val: string) => void; +} + +export const useSelectedView = (): Props => { + const getSelectedView = localStorage.getItem(localKey) ?? 'list'; + + const [selectedView, setSelectedView] = useState(getSelectedView); + + useEffect(() => { + localStorage.setItem(localKey, selectedView); + }, [selectedView]); + + return { selectedView, setSelectedView }; +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_map.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_map.test.tsx.snap new file mode 100644 index 00000000000000..6b3d157c23fee7 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_map.test.tsx.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LocationMap component renders correctly against snapshot 1`] = ` + + + +`; diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap similarity index 99% rename from x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap index 150c4581dfd13a..cd282f916f46cd 100644 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap @@ -4,6 +4,7 @@ exports[`LocationMissingWarning component renders correctly against snapshot 1`] .c0 { margin-left: auto; margin-bottom: 3px; + margin-right: 5px; }
{ + let upPoints: LocationPoint[]; + + beforeEach(() => { + upPoints = [ + { + name: 'New York', + location: { lat: '40.730610', lon: ' -73.935242' }, + }, + { + name: 'Tokyo', + location: { lat: '52.487448', lon: ' 13.394798' }, + }, + ]; + }); + + it('renders correctly against snapshot', () => { + const component = shallowWithIntl(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/location_missing.test.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/location_missing.test.tsx similarity index 100% rename from x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/location_missing.test.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/location_missing.test.tsx diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/__tests__/__mocks__/mock.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/__mocks__/mock.ts similarity index 96% rename from x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/__tests__/__mocks__/mock.ts rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/__mocks__/mock.ts index 291ab555fbdc67..626011e3d09c9a 100644 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/__tests__/__mocks__/mock.ts +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/__mocks__/mock.ts @@ -14,6 +14,7 @@ export const mockDownPointsLayer = { __featureCollection: { features: [ { + id: 'Asia', type: 'feature', geometry: { type: 'Point', @@ -21,6 +22,7 @@ export const mockDownPointsLayer = { }, }, { + id: 'APJ', type: 'feature', geometry: { type: 'Point', @@ -28,6 +30,7 @@ export const mockDownPointsLayer = { }, }, { + id: 'Canada', type: 'feature', geometry: { type: 'Point', @@ -79,6 +82,7 @@ export const mockUpPointsLayer = { __featureCollection: { features: [ { + id: 'US-EAST', type: 'feature', geometry: { type: 'Point', @@ -86,6 +90,7 @@ export const mockUpPointsLayer = { }, }, { + id: 'US-WEST', type: 'feature', geometry: { type: 'Point', @@ -93,6 +98,7 @@ export const mockUpPointsLayer = { }, }, { + id: 'Europe', type: 'feature', geometry: { type: 'Point', diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/__tests__/map_config.test.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/map_config.test.ts similarity index 65% rename from x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/__tests__/map_config.test.ts rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/map_config.test.ts index 7d53d784ff3387..09a41bd9eb4b9f 100644 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/__tests__/map_config.test.ts +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/map_config.test.ts @@ -7,7 +7,7 @@ import { getLayerList } from '../map_config'; import { mockLayerList } from './__mocks__/mock'; import { LocationPoint } from '../embedded_map'; -import { UptimeAppColors } from '../../../../../uptime_app'; +import { UptimeAppColors } from '../../../../../../uptime_app'; jest.mock('uuid', () => { return { @@ -22,14 +22,14 @@ describe('map_config', () => { beforeEach(() => { upPoints = [ - { lat: '52.487239', lon: '13.399262' }, - { lat: '55.487239', lon: '13.399262' }, - { lat: '54.487239', lon: '14.399262' }, + { name: 'US-EAST', location: { lat: '52.487239', lon: '13.399262' } }, + { location: { lat: '55.487239', lon: '13.399262' }, name: 'US-WEST' }, + { location: { lat: '54.487239', lon: '14.399262' }, name: 'Europe' }, ]; downPoints = [ - { lat: '52.487239', lon: '13.399262' }, - { lat: '55.487239', lon: '13.399262' }, - { lat: '54.487239', lon: '14.399262' }, + { location: { lat: '52.487239', lon: '13.399262' }, name: 'Asia' }, + { location: { lat: '55.487239', lon: '13.399262' }, name: 'APJ' }, + { location: { lat: '54.487239', lon: '14.399262' }, name: 'Canada' }, ]; colors = { danger: '#BC261E', diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/embedded_map.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx similarity index 68% rename from x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/embedded_map.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx index 8c971ba8c20f2f..33b0a9b8c2cbc2 100644 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/embedded_map.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx @@ -7,28 +7,35 @@ import React, { useEffect, useState, useContext, useRef } from 'react'; import uuid from 'uuid'; import styled from 'styled-components'; +import { createPortalNode, InPortal, OutPortal } from 'react-reverse-portal'; import { MapEmbeddable, MapEmbeddableInput, // eslint-disable-next-line @kbn/eslint/no-restricted-paths -} from '../../../../../../maps/public/embeddable'; +} from '../../../../../../../maps/public/embeddable'; import * as i18n from './translations'; -import { Location } from '../../../../../common/runtime_types'; +import { GeoPoint } from '../../../../../../common/runtime_types'; import { getLayerList } from './map_config'; -import { UptimeThemeContext, UptimeStartupPluginsContext } from '../../../../contexts'; +import { UptimeThemeContext, UptimeStartupPluginsContext } from '../../../../../contexts'; + +import { MAP_SAVED_OBJECT_TYPE } from '../../../../../../../maps/public'; +import { MapToolTipComponent } from './map_tool_tip'; import { isErrorEmbeddable, ViewMode, ErrorEmbeddable, -} from '../../../../../../../../src/plugins/embeddable/public'; -import { MAP_SAVED_OBJECT_TYPE } from '../../../../../../maps/public'; +} from '../../../../../../../../../src/plugins/embeddable/public'; +import { + RenderTooltipContentParams, + // eslint-disable-next-line @kbn/eslint/no-restricted-paths +} from '../../../../../../../maps/public/classes/tooltips/tooltip_property'; export interface EmbeddedMapProps { upPoints: LocationPoint[]; downPoints: LocationPoint[]; } -export type LocationPoint = Required; +export type LocationPoint = Required; const EmbeddedPanel = styled.div` z-index: auto; @@ -58,6 +65,8 @@ export const EmbeddedMap = React.memo(({ upPoints, downPoints }: EmbeddedMapProp } const factory: any = embeddablePlugin.getEmbeddableFactory(MAP_SAVED_OBJECT_TYPE); + const portalNode = React.useMemo(() => createPortalNode(), []); + const input: MapEmbeddableInput = { id: uuid.v4(), filters: [], @@ -77,12 +86,38 @@ export const EmbeddedMap = React.memo(({ upPoints, downPoints }: EmbeddedMapProp zoom: 0, }, disableInteractive: true, - disableTooltipControl: true, hideToolbarOverlay: true, hideLayerControl: true, hideViewControl: true, }; + const renderTooltipContent = ({ + addFilters, + closeTooltip, + features, + isLocked, + getLayerName, + loadFeatureProperties, + loadFeatureGeometry, + }: RenderTooltipContentParams) => { + const props = { + addFilters, + closeTooltip, + isLocked, + getLayerName, + loadFeatureProperties, + loadFeatureGeometry, + }; + const relevantFeatures = features.filter( + (item: any) => item.layerId === 'up_points' || item.layerId === 'down_points' + ); + if (relevantFeatures.length > 0) { + return ; + } + closeTooltip(); + return null; + }; + useEffect(() => { async function setupEmbeddable() { if (!factory) { @@ -94,11 +129,13 @@ export const EmbeddedMap = React.memo(({ upPoints, downPoints }: EmbeddedMapProp }); if (embeddableObject && !isErrorEmbeddable(embeddableObject)) { - embeddableObject.setLayerList(getLayerList(upPoints, downPoints, colors)); + embeddableObject.setRenderTooltipContent(renderTooltipContent); + await embeddableObject.setLayerList(getLayerList(upPoints, downPoints, colors)); } setEmbeddable(embeddableObject); } + setupEmbeddable(); // we want this effect to execute exactly once after the component mounts @@ -126,6 +163,9 @@ export const EmbeddedMap = React.memo(({ upPoints, downPoints }: EmbeddedMapProp className="embPanel__content" ref={embeddableRoot} /> + + + ); }); diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/low_poly_layer.json b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/low_poly_layer.json similarity index 100% rename from x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/low_poly_layer.json rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/low_poly_layer.json diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/map_config.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_config.ts similarity index 94% rename from x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/map_config.ts rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_config.ts index f1b530c767f1fc..e766641102a249 100644 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/map_config.ts +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_config.ts @@ -6,7 +6,7 @@ import lowPolyLayerFeatures from './low_poly_layer.json'; import { LocationPoint } from './embedded_map'; -import { UptimeAppColors } from '../../../../uptime_app'; +import { UptimeAppColors } from '../../../../../uptime_app'; /** * Returns `Source/Destination Point-to-point` Map LayerList configuration, with a source, @@ -70,9 +70,10 @@ export const getLowPolyLayer = () => { export const getDownPointsLayer = (downPoints: LocationPoint[], dangerColor: string) => { const features = downPoints?.map((point) => ({ type: 'feature', + id: point.name, geometry: { type: 'Point', - coordinates: [+point.lon, +point.lat], + coordinates: [+point.location.lon, +point.location.lat], }, })); return { @@ -122,9 +123,10 @@ export const getDownPointsLayer = (downPoints: LocationPoint[], dangerColor: str export const getUpPointsLayer = (upPoints: LocationPoint[]) => { const features = upPoints?.map((point) => ({ type: 'feature', + id: point.name, geometry: { type: 'Point', - coordinates: [+point.lon, +point.lat], + coordinates: [+point.location.lon, +point.location.lat], }, })); return { diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx new file mode 100644 index 00000000000000..e1b3713fb8cbed --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_tool_tip.tsx @@ -0,0 +1,93 @@ +/* + * 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 moment from 'moment'; +import { i18n } from '@kbn/i18n'; +import React, { useContext } from 'react'; +import { useSelector } from 'react-redux'; +import { + EuiDescriptionList, + EuiDescriptionListDescription, + EuiDescriptionListTitle, + EuiOutsideClickDetector, + EuiPopoverTitle, +} from '@elastic/eui'; +import { TagLabel } from '../../availability_reporting'; +import { UptimeThemeContext } from '../../../../../contexts'; +import { AppState } from '../../../../../state'; +import { monitorLocationsSelector } from '../../../../../state/selectors'; +import { useMonitorId } from '../../../../../hooks'; +import { MonitorLocation } from '../../../../../../common/runtime_types/monitor'; +import { formatAvailabilityValue } from '../../availability_reporting/availability_reporting'; +import { LastCheckLabel } from '../../translations'; +import { + RenderTooltipContentParams, + // eslint-disable-next-line @kbn/eslint/no-restricted-paths +} from '../../../../../../../maps/public/classes/tooltips/tooltip_property'; + +type MapToolTipProps = Partial; + +export const MapToolTipComponent = ({ closeTooltip, features = [] }: MapToolTipProps) => { + const { id: featureId, layerId } = features[0] ?? {}; + const locationName = featureId?.toString(); + const { + colors: { gray, danger }, + } = useContext(UptimeThemeContext); + + const monitorId = useMonitorId(); + + const monitorLocations = useSelector((state: AppState) => + monitorLocationsSelector(state, monitorId) + ); + if (!locationName || !monitorLocations?.locations) { + return null; + } + const { + timestamp, + up_history: ups, + down_history: downs, + }: MonitorLocation = monitorLocations.locations!.find( + ({ geo }: MonitorLocation) => geo.name === locationName + )!; + + const availability = (ups / (ups + downs)) * 100; + + return ( + { + if (closeTooltip != null) { + closeTooltip(); + } + }} + > + <> + + {layerId === 'up_points' ? ( + + ) : ( + + )} + + + Availability + + {i18n.translate('xpack.uptime.mapToolTip.AvailabilityStat.title', { + defaultMessage: '{value} %', + values: { value: formatAvailabilityValue(availability) }, + description: 'A percentage value like 23.5%', + })} + + {LastCheckLabel} + + {moment(timestamp).fromNow()} + + + + + ); +}; + +export const MapToolTip = React.memo(MapToolTipComponent); diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/translations.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/translations.ts similarity index 100% rename from x-pack/plugins/uptime/public/components/monitor/location_map/embeddables/translations.ts rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/translations.ts diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/index.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/index.ts similarity index 81% rename from x-pack/plugins/uptime/public/components/monitor/location_map/index.ts rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/index.ts index 140d33bbeef66f..4261400bebc6fc 100644 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/index.ts +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/index.ts @@ -5,4 +5,4 @@ */ export * from './location_map'; -export * from './location_status_tags'; +export * from '../availability_reporting/location_status_tags'; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/location_map.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/location_map.tsx new file mode 100644 index 00000000000000..3d0a097d20d70e --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/location_map.tsx @@ -0,0 +1,34 @@ +/* + * 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 styled from 'styled-components'; +import { EmbeddedMap, LocationPoint } from './embeddables/embedded_map'; + +// These height/width values are used to make sure map is in center of panel +// And to make sure, it doesn't take too much space +const MapPanel = styled.div` + height: 240px; + width: 520px; + margin-right: 65px; + @media (max-width: 574px) { + height: 250px; + width: 100%; + } +`; + +interface Props { + upPoints: LocationPoint[]; + downPoints: LocationPoint[]; +} + +export const LocationMap = ({ upPoints, downPoints }: Props) => { + return ( + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/location_map/location_missing.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/location_missing.tsx similarity index 96% rename from x-pack/plugins/uptime/public/components/monitor/location_map/location_missing.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/location_missing.tsx index 6ce31e4cc8243f..e364b6b8940b32 100644 --- a/x-pack/plugins/uptime/public/components/monitor/location_map/location_missing.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/location_missing.tsx @@ -16,11 +16,12 @@ import { } from '@elastic/eui'; import styled from 'styled-components'; import { FormattedMessage } from '@kbn/i18n/react'; -import { LocationLink } from '../../common/location_link'; +import { LocationLink } from '../../../common/location_link'; const EuiPopoverRight = styled(EuiFlexItem)` margin-left: auto; margin-bottom: 3px; + margin-right: 5px; `; export const LocationMissingWarning = () => { diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/index.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/index.ts similarity index 72% rename from x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/index.ts rename to x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/index.ts index 3c861412a39e91..22a059d6037781 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/index.ts +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/index.ts @@ -5,5 +5,4 @@ */ export { MonitorSSLCertificate } from './ssl_certificate'; -export { MonitorStatusBarComponent } from './status_bar'; -export { MonitorStatusBar } from './status_bar_container'; +export { MonitorStatusBar } from './status_bar'; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/ssl_certificate.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/ssl_certificate.tsx new file mode 100644 index 00000000000000..93720ab313ee3a --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/ssl_certificate.tsx @@ -0,0 +1,41 @@ +/* + * 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 { Link } from 'react-router-dom'; +import { EuiSpacer } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { Tls } from '../../../../../common/runtime_types'; +import { CERTIFICATES_ROUTE } from '../../../../../common/constants'; +import { MonListDescription, MonListTitle } from './status_bar'; +import { CertStatusColumn } from '../../../overview/monitor_list/cert_status_column'; + +interface Props { + /** + * TLS information coming from monitor in ES heartbeat index + */ + tls: Tls | undefined; +} + +export const MonitorSSLCertificate = ({ tls }: Props) => { + return tls?.not_after ? ( + <> + + + + + + + + + + + + ) : null; +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx new file mode 100644 index 00000000000000..afcc8fae7a8ac0 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_bar.tsx @@ -0,0 +1,82 @@ +/* + * 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 styled from 'styled-components'; +import { + EuiLink, + EuiIcon, + EuiSpacer, + EuiDescriptionList, + EuiDescriptionListTitle, + EuiDescriptionListDescription, +} from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { MonitorSSLCertificate } from './ssl_certificate'; +import * as labels from '../translations'; +import { StatusByLocations } from './status_by_location'; +import { useStatusBar } from './use_status_bar'; +import { MonitorIDLabel, OverallAvailability } from '../translations'; +import { URL_LABEL } from '../../../common/translations'; +import { MonitorLocations } from '../../../../../common/runtime_types/monitor'; +import { formatAvailabilityValue } from '../availability_reporting/availability_reporting'; + +export const MonListTitle = styled(EuiDescriptionListTitle)` + &&& { + width: 35%; + } +`; + +export const MonListDescription = styled(EuiDescriptionListDescription)` + &&& { + width: 65%; + overflow-wrap: anywhere; + } +`; + +export const MonitorStatusBar: React.FC = () => { + const { monitorId, monitorStatus, monitorLocations = {} } = useStatusBar(); + + const { locations, up_history: ups, down_history: downs } = monitorLocations as MonitorLocations; + + const full = monitorStatus?.url?.full ?? ''; + + const availability = (ups === 0 && downs === 0) || !ups ? 0 : (ups / (ups + downs)) * 100; + + return ( + <> +
+ +
+ + + {OverallAvailability} + + + + {URL_LABEL} + + + {full} + + + {MonitorIDLabel} + {monitorId} + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/status_by_location.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_by_location.tsx similarity index 100% rename from x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/status_by_location.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/status_by_location.tsx diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/status_bar_container.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/use_status_bar.ts similarity index 66% rename from x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/status_bar_container.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/use_status_bar.ts index 95622954375151..27e953aab1b710 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/status_bar_container.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/status_bar/use_status_bar.ts @@ -4,24 +4,33 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useContext, useEffect } from 'react'; +import { useContext, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { monitorLocationsSelector, monitorStatusSelector } from '../../../../state/selectors'; -import { MonitorStatusBarComponent } from './index'; -import { getMonitorStatusAction } from '../../../../state/actions'; -import { useGetUrlParams } from '../../../../hooks'; import { UptimeRefreshContext } from '../../../../contexts'; -import { MonitorIdParam } from '../../../../../common/types'; +import { useGetUrlParams, useMonitorId } from '../../../../hooks'; +import { monitorLocationsSelector, monitorStatusSelector } from '../../../../state/selectors'; import { AppState } from '../../../../state'; +import { getMonitorStatusAction } from '../../../../state/actions'; +import { Ping } from '../../../../../common/runtime_types/ping'; +import { MonitorLocations } from '../../../../../common/runtime_types/monitor'; -export const MonitorStatusBar: React.FC = ({ monitorId }) => { +interface MonitorStatusBarProps { + monitorId: string; + monitorStatus: Ping | null; + monitorLocations?: MonitorLocations; +} + +export const useStatusBar = (): MonitorStatusBarProps => { const { lastRefresh } = useContext(UptimeRefreshContext); const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = useGetUrlParams(); const dispatch = useDispatch(); + const monitorId = useMonitorId(); + const monitorStatus = useSelector(monitorStatusSelector); + const monitorLocations = useSelector((state: AppState) => monitorLocationsSelector(state, monitorId) ); @@ -30,11 +39,5 @@ export const MonitorStatusBar: React.FC = ({ monitorId }) => { dispatch(getMonitorStatusAction({ dateStart, dateEnd, monitorId })); }, [monitorId, dateStart, dateEnd, lastRefresh, dispatch]); - return ( - - ); + return { monitorStatus, monitorLocations, monitorId }; }; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/status_details.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx similarity index 72% rename from x-pack/plugins/uptime/public/components/monitor/monitor_status_details/status_details.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx index 3766ac86785f71..dea39494646a62 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/status_details.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx @@ -7,31 +7,24 @@ import React, { useContext, useEffect, useState } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui'; import styled from 'styled-components'; -import { LocationMap } from '../location_map'; +import { LocationAvailability } from './location_availability/location_availability'; import { UptimeRefreshContext } from '../../../contexts'; import { MonitorLocations } from '../../../../common/runtime_types'; -import { MonitorStatusBar } from './monitor_status_bar'; +import { MonitorStatusBar } from './status_bar'; interface MonitorStatusDetailsProps { - monitorId: string; monitorLocations: MonitorLocations; } const WrapFlexItem = styled(EuiFlexItem)` &&& { - @media (max-width: 768px) { - width: 100%; - } - @media (max-width: 1042px) { - flex-basis: 520px; + @media (max-width: 800px) { + flex-basis: 100%; } } `; -export const MonitorStatusDetailsComponent = ({ - monitorId, - monitorLocations, -}: MonitorStatusDetailsProps) => { +export const MonitorStatusDetailsComponent = ({ monitorLocations }: MonitorStatusDetailsProps) => { const { refreshApp } = useContext(UptimeRefreshContext); const [isTabActive] = useState(document.visibilityState); @@ -56,12 +49,12 @@ export const MonitorStatusDetailsComponent = ({ return ( - - - + + + - - + + diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/status_details_container.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/status_details_container.tsx similarity index 92% rename from x-pack/plugins/uptime/public/components/monitor/monitor_status_details/status_details_container.tsx rename to x-pack/plugins/uptime/public/components/monitor/status_details/status_details_container.tsx index 251f3562f9d1a3..92e144bd1b9cc4 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/status_details_container.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/status_details_container.tsx @@ -28,7 +28,5 @@ export const MonitorStatusDetails: React.FC = ({ monitorId }) => dispatch(getMonitorLocationsAction({ dateStart, dateEnd, monitorId })); }, [monitorId, dateStart, dateEnd, lastRefresh, dispatch]); - return ( - - ); + return ; }; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/translations.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/translations.ts similarity index 50% rename from x-pack/plugins/uptime/public/components/monitor/monitor_status_details/translations.ts rename to x-pack/plugins/uptime/public/components/monitor/status_details/translations.ts index f60a1ceeaafb84..f593525fa09424 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_status_details/translations.ts +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/translations.ts @@ -48,3 +48,56 @@ export const timestampFromNowTextAriaLabel = i18n.translate( export const loadingMessage = i18n.translate('xpack.uptime.monitorStatusBar.loadingMessage', { defaultMessage: 'Loading…', }); + +export const MonitorIDLabel = i18n.translate('xpack.uptime.monitorStatusBar.monitor.id', { + defaultMessage: 'Monitor ID', +}); + +export const OverallAvailability = i18n.translate( + 'xpack.uptime.monitorStatusBar.monitor.availability', + { + defaultMessage: 'Overall availability', + } +); + +export const MonitoringFrom = i18n.translate( + 'xpack.uptime.monitorStatusBar.monitor.monitoringFrom', + { + defaultMessage: 'Monitoring from', + } +); + +export const ChangeToMapView = i18n.translate( + 'xpack.uptime.monitorStatusBar.monitor.monitoringFrom.listToMap', + { + defaultMessage: 'Change to map view to check availability by location.', + } +); + +export const ChangeToListView = i18n.translate( + 'xpack.uptime.monitorStatusBar.monitor.monitoringFrom.MapToList', + { + defaultMessage: 'Change to list view to check availability by location.', + } +); + +export const LocationLabel = i18n.translate( + 'xpack.uptime.monitorStatusBar.monitor.availabilityReport.location', + { + defaultMessage: 'Location', + } +); + +export const AvailabilityLabel = i18n.translate( + 'xpack.uptime.monitorStatusBar.monitor.availabilityReport.availability', + { + defaultMessage: 'Availability', + } +); + +export const LastCheckLabel = i18n.translate( + 'xpack.uptime.monitorStatusBar.monitor.availabilityReport.lastCheck', + { + defaultMessage: 'Last check', + } +); diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/cert_status_column.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/cert_status_column.tsx index 5ad0f4d3d1d494..b7c70198912fcd 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/cert_status_column.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/cert_status_column.tsx @@ -8,13 +8,14 @@ import React from 'react'; import moment from 'moment'; import styled from 'styled-components'; import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'; -import { Cert } from '../../../../common/runtime_types'; +import { Cert, Tls } from '../../../../common/runtime_types'; import { useCertStatus } from '../../../hooks'; -import { EXPIRED, EXPIRES_SOON } from '../../certificates/translations'; +import { EXPIRED, EXPIRES, EXPIRES_SOON } from '../../certificates/translations'; import { CERT_STATUS } from '../../../../common/constants'; interface Props { - cert: Cert; + cert: Cert | Tls; + boldStyle?: boolean; } const Span = styled.span` @@ -22,7 +23,15 @@ const Span = styled.span` vertical-align: middle; `; -export const CertStatusColumn: React.FC = ({ cert }) => { +const H4Text = styled.h4` + &&& { + margin: 0 0 0 4px; + display: inline-block; + color: inherit; + } +`; + +export const CertStatusColumn: React.FC = ({ cert, boldStyle = false }) => { const certStatus = useCertStatus(cert?.not_after); const relativeDate = moment(cert?.not_after).fromNow(); @@ -32,9 +41,15 @@ export const CertStatusColumn: React.FC = ({ cert }) => { - - {text} {relativeDate} - + {boldStyle ? ( + + {text} {relativeDate} + + ) : ( + + {text} {relativeDate} + + )} ); @@ -47,5 +62,5 @@ export const CertStatusColumn: React.FC = ({ cert }) => { return ; } - return certStatus ? : --; + return certStatus ? : --; }; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx index 1526838460957c..75d587579f66fa 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx @@ -30,6 +30,7 @@ import { MonitorListProps } from './monitor_list_container'; import { MonitorList } from '../../../state/reducers/monitor_list'; import { CertStatusColumn } from './cert_status_column'; import { MonitorListHeader } from './monitor_list_header'; +import { URL_LABEL } from '../../common/translations'; interface Props extends MonitorListProps { pageSize: number; @@ -106,7 +107,7 @@ export const MonitorListComponent: React.FC = ({ { align: 'left' as const, field: 'state.url.full', - name: labels.URL, + name: URL_LABEL, render: (url: string, summary: MonitorSummary) => ( {url} diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts b/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts index e70eef1d911617..ee922a9ef803f3 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/translations.ts @@ -62,10 +62,6 @@ export const NO_DATA_MESSAGE = i18n.translate('xpack.uptime.monitorList.noItemMe description: 'This message is shown if the monitors table is rendered but has no items.', }); -export const URL = i18n.translate('xpack.uptime.monitorList.table.url.name', { - defaultMessage: 'Url', -}); - export const UP = i18n.translate('xpack.uptime.monitorList.statusColumn.upLabel', { defaultMessage: 'Up', }); diff --git a/x-pack/plugins/uptime/public/contexts/uptime_theme_context.tsx b/x-pack/plugins/uptime/public/contexts/uptime_theme_context.tsx index 7a9450ea2774e3..ca2fb50cdbc677 100644 --- a/x-pack/plugins/uptime/public/contexts/uptime_theme_context.tsx +++ b/x-pack/plugins/uptime/public/contexts/uptime_theme_context.tsx @@ -7,10 +7,16 @@ import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import React, { createContext, useMemo } from 'react'; import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; +import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; +import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; import { UptimeAppColors } from '../uptime_app'; export interface UptimeThemeContextValues { colors: UptimeAppColors; + chartTheme: { + baseTheme?: Theme; + theme?: PartialTheme; + }; } /** @@ -26,6 +32,10 @@ const defaultContext: UptimeThemeContextValues = { warning: euiLightVars.euiColorWarning, gray: euiLightVars.euiColorLightShade, }, + chartTheme: { + baseTheme: LIGHT_THEME, + theme: EUI_CHARTS_THEME_LIGHT.theme, + }, }; export const UptimeThemeContext = createContext(defaultContext); @@ -58,8 +68,12 @@ export const UptimeThemeContextProvider: React.FC = ({ darkMo const value = useMemo(() => { return { colors, + chartTheme: { + baseTheme: darkMode ? DARK_THEME : LIGHT_THEME, + theme: darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme, + }, }; - }, [colors]); + }, [colors, darkMode]); return ; }; diff --git a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap index f9927752f520c9..fcf68ad97c8cec 100644 --- a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap +++ b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap @@ -2,21 +2,25 @@ exports[`PageHeader shallow renders extra links: page_header_with_extra_links 1`] = ` Array [ - @media only screen and (max-width:1024px) and (min-width:868px) { - .c0.c0.c0 .euiSuperDatePicker__flexWrapper { + .c0 { + white-space: nowrap; +} + +@media only screen and (max-width:1024px) and (min-width:868px) { + .c1.c1.c1 .euiSuperDatePicker__flexWrapper { width: 500px; } } @media only screen and (max-width:880px) { - .c0.c0.c0 { + .c1.c1.c1 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } - .c0.c0.c0 .euiSuperDatePicker__flexWrapper { + .c1.c1.c1 .euiSuperDatePicker__flexWrapper { width: calc(100% + 8px); } } @@ -28,7 +32,7 @@ Array [ class="euiFlexItem" >

TestingHeading

@@ -126,7 +130,7 @@ Array [

TestingHeading

@@ -273,7 +281,7 @@ Array [ class="euiFlexItem euiFlexItem--flexGrowZero" />

TestingHeading

diff --git a/x-pack/plugins/uptime/public/pages/page_header.tsx b/x-pack/plugins/uptime/public/pages/page_header.tsx index 2e84f59f0b552e..421e0e3a4ebdef 100644 --- a/x-pack/plugins/uptime/public/pages/page_header.tsx +++ b/x-pack/plugins/uptime/public/pages/page_header.tsx @@ -19,6 +19,7 @@ interface PageHeaderProps { extraLinks?: boolean; datePicker?: boolean; } + const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.settingsLink', { defaultMessage: 'Settings', }); @@ -43,6 +44,10 @@ const StyledPicker = styled(EuiFlexItem)` } `; +const H1Text = styled.h1` + white-space: nowrap; +`; + export const PageHeader = React.memo( ({ headingText, extraLinks = false, datePicker = true }: PageHeaderProps) => { const DatePickerComponent = () => @@ -89,7 +94,7 @@ export const PageHeader = React.memo( > -

{headingText}

+ {headingText} {extraLinkComponents} diff --git a/x-pack/plugins/uptime/server/lib/requests/get_monitor_locations.ts b/x-pack/plugins/uptime/server/lib/requests/get_monitor_locations.ts index c8d3ca043edc50..17d79002e6f7d4 100644 --- a/x-pack/plugins/uptime/server/lib/requests/get_monitor_locations.ts +++ b/x-pack/plugins/uptime/server/lib/requests/get_monitor_locations.ts @@ -32,7 +32,7 @@ export const getMonitorLocations: UMElasticsearchQueryFn< bool: { filter: [ { - match: { + term: { 'monitor.id': monitorId, }, }, @@ -70,6 +70,18 @@ export const getMonitorLocations: UMElasticsearchQueryFn< _source: ['monitor', 'summary', 'observer', '@timestamp'], }, }, + down_history: { + sum: { + field: 'summary.down', + missing: 0, + }, + }, + up_history: { + sum: { + field: 'summary.up', + missing: 0, + }, + }, }, }, }, @@ -99,10 +111,17 @@ export const getMonitorLocations: UMElasticsearchQueryFn< } }; + let totalUps = 0; + let totalDowns = 0; + const monLocs: MonitorLocation[] = []; - locations.forEach((loc: any) => { - const mostRecentLocation = loc.most_recent.hits.hits[0]._source; + locations.forEach(({ most_recent: mostRecent, up_history, down_history }: any) => { + const mostRecentLocation = mostRecent.hits.hits[0]._source; + totalUps += up_history.value; + totalDowns += down_history.value; const location: MonitorLocation = { + up_history: up_history.value ?? 0, + down_history: down_history.value ?? 0, summary: mostRecentLocation?.summary, geo: getGeo(mostRecentLocation?.observer?.geo), timestamp: mostRecentLocation['@timestamp'], @@ -113,5 +132,7 @@ export const getMonitorLocations: UMElasticsearchQueryFn< return { monitorId, locations: monLocs, + up_history: totalUps, + down_history: totalDowns, }; }; diff --git a/x-pack/test/accessibility/apps/uptime.ts b/x-pack/test/accessibility/apps/uptime.ts index dccce4ba1b0b19..ebd120fa0feea4 100644 --- a/x-pack/test/accessibility/apps/uptime.ts +++ b/x-pack/test/accessibility/apps/uptime.ts @@ -65,7 +65,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('detail page', async () => { await uptimeService.navigation.goToMonitor(A11Y_TEST_MONITOR_ID); - await uptimeService.monitor.locationMapIsRendered(); + await uptimeService.monitor.displayOverallAvailability('0.00 %'); await a11y.testAppSnapshot(); }); diff --git a/x-pack/test/api_integration/apis/management/index_management/data_streams.ts b/x-pack/test/api_integration/apis/management/index_management/data_streams.ts index e1756df42ca25b..74ab59f2ffdc69 100644 --- a/x-pack/test/api_integration/apis/management/index_management/data_streams.ts +++ b/x-pack/test/api_integration/apis/management/index_management/data_streams.ts @@ -19,79 +19,131 @@ export default function ({ getService }: FtrProviderContext) { const supertest = getService('supertest'); const es = getService('legacyEs'); - const createDataStream = (name: string) => { + const createDataStream = async (name: string) => { // A data stream requires an index template before it can be created. - return es.dataManagement - .saveComposableIndexTemplate({ - name, - body: { - // We need to match the names of backing indices with this template - index_patterns: [name + '*'], - template: { - mappings: { - properties: { - '@timestamp': { - type: 'date', - }, + await es.dataManagement.saveComposableIndexTemplate({ + name, + body: { + // We need to match the names of backing indices with this template. + index_patterns: [name + '*'], + template: { + mappings: { + properties: { + '@timestamp': { + type: 'date', }, }, }, - data_stream: { - timestamp_field: '@timestamp', - }, }, - }) - .then(() => - es.dataManagement.createDataStream({ - name, - }) - ); + data_stream: { + timestamp_field: '@timestamp', + }, + }, + }); + + await es.dataManagement.createDataStream({ name }); }; - const deleteDataStream = (name: string) => { - return es.dataManagement - .deleteDataStream({ - name, - }) - .then(() => - es.dataManagement.deleteComposableIndexTemplate({ - name, - }) - ); + const deleteComposableIndexTemplate = async (name: string) => { + await es.dataManagement.deleteComposableIndexTemplate({ name }); }; - // Unskip once ES snapshot has been promoted that updates the data stream response - describe.skip('Data streams', function () { - const testDataStreamName = 'test-data-stream'; + const deleteDataStream = async (name: string) => { + await es.dataManagement.deleteDataStream({ name }); + await deleteComposableIndexTemplate(name); + }; + describe('Data streams', function () { describe('Get', () => { + const testDataStreamName = 'test-data-stream'; + before(async () => await createDataStream(testDataStreamName)); after(async () => await deleteDataStream(testDataStreamName)); - describe('all data streams', () => { - it('returns an array of data streams', async () => { - const { body: dataStreams } = await supertest - .get(`${API_BASE_PATH}/data_streams`) - .set('kbn-xsrf', 'xxx') - .expect(200); + it('returns an array of all data streams', async () => { + const { body: dataStreams } = await supertest + .get(`${API_BASE_PATH}/data_streams`) + .set('kbn-xsrf', 'xxx') + .expect(200); + + // ES determines these values so we'll just echo them back. + const { name: indexName, uuid } = dataStreams[0].indices[0]; + expect(dataStreams).to.eql([ + { + name: testDataStreamName, + timeStampField: { name: '@timestamp', mapping: { type: 'date' } }, + indices: [ + { + name: indexName, + uuid, + }, + ], + generation: 1, + }, + ]); + }); + + it('returns a single data stream by ID', async () => { + const { body: dataStream } = await supertest + .get(`${API_BASE_PATH}/data_streams/${testDataStreamName}`) + .set('kbn-xsrf', 'xxx') + .expect(200); - // ES determines these values so we'll just echo them back. - const { name: indexName, uuid } = dataStreams[0].indices[0]; - expect(dataStreams).to.eql([ + // ES determines these values so we'll just echo them back. + const { name: indexName, uuid } = dataStream.indices[0]; + expect(dataStream).to.eql({ + name: testDataStreamName, + timeStampField: { name: '@timestamp', mapping: { type: 'date' } }, + indices: [ { - name: testDataStreamName, - timeStampField: { name: '@timestamp', mapping: { type: 'date' } }, - indices: [ - { - name: indexName, - uuid, - }, - ], - generation: 1, + name: indexName, + uuid, }, - ]); + ], + generation: 1, }); }); }); + + describe('Delete', () => { + const testDataStreamName1 = 'test-data-stream1'; + const testDataStreamName2 = 'test-data-stream2'; + + before(async () => { + await Promise.all([ + createDataStream(testDataStreamName1), + createDataStream(testDataStreamName2), + ]); + }); + + after(async () => { + // The Delete API only deletes the data streams, so we still need to manually delete their + // related index patterns to clean up. + await Promise.all([ + deleteComposableIndexTemplate(testDataStreamName1), + deleteComposableIndexTemplate(testDataStreamName2), + ]); + }); + + it('deletes multiple data streams', async () => { + await supertest + .post(`${API_BASE_PATH}/delete_data_streams`) + .set('kbn-xsrf', 'xxx') + .send({ + dataStreams: [testDataStreamName1, testDataStreamName2], + }) + .expect(200); + + await supertest + .get(`${API_BASE_PATH}/data_streams/${testDataStreamName1}`) + .set('kbn-xsrf', 'xxx') + .expect(404); + + await supertest + .get(`${API_BASE_PATH}/data_streams/${testDataStreamName2}`) + .set('kbn-xsrf', 'xxx') + .expect(404); + }); + }); }); } diff --git a/x-pack/test/functional/apps/rollup_job/rollup_jobs.js b/x-pack/test/functional/apps/rollup_job/rollup_jobs.js index 28f5e2ae00f09e..5b6484d7184f30 100644 --- a/x-pack/test/functional/apps/rollup_job/rollup_jobs.js +++ b/x-pack/test/functional/apps/rollup_job/rollup_jobs.js @@ -31,9 +31,9 @@ export default function ({ getService, getPageObjects }) { it('create new rollup job', async () => { const interval = '1000ms'; - pastDates.map(async (day) => { + for (const day of pastDates) { await es.index(mockIndices(day, rollupSourceDataPrepend)); - }); + } await PageObjects.common.navigateToApp('rollupJob'); await PageObjects.rollup.createNewRollUpJob( diff --git a/x-pack/test/functional/apps/saved_objects_management/feature_controls/saved_objects_management_security.ts b/x-pack/test/functional/apps/saved_objects_management/feature_controls/saved_objects_management_security.ts index 9969608bd2a453..819d03d8119468 100644 --- a/x-pack/test/functional/apps/saved_objects_management/feature_controls/saved_objects_management_security.ts +++ b/x-pack/test/functional/apps/saved_objects_management/feature_controls/saved_objects_management_security.ts @@ -10,7 +10,14 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { const esArchiver = getService('esArchiver'); const security = getService('security'); const testSubjects = getService('testSubjects'); - const PageObjects = getPageObjects(['common', 'settings', 'security', 'error', 'header']); + const PageObjects = getPageObjects([ + 'common', + 'settings', + 'security', + 'error', + 'header', + 'savedObjects', + ]); let version: string = ''; describe('feature controls saved objects management', () => { @@ -66,7 +73,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { }); it('shows all saved objects', async () => { - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); expect(objects).to.eql([ 'Advanced Settings [6.0.0]', `Advanced Settings [${version}]`, @@ -77,7 +84,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { }); it('can view all saved objects in applications', async () => { - const bools = await PageObjects.settings.getSavedObjectsTableSummary(); + const bools = await PageObjects.savedObjects.getTableSummary(); expect(bools).to.eql([ { title: 'Advanced Settings [6.0.0]', @@ -103,8 +110,8 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { }); it('can delete all saved objects', async () => { - await PageObjects.settings.clickSavedObjectsTableSelectAll(); - const actual = await PageObjects.settings.canSavedObjectsBeDeleted(); + await PageObjects.savedObjects.clickTableSelectAll(); + const actual = await PageObjects.savedObjects.canBeDeleted(); expect(actual).to.be(true); }); }); @@ -185,7 +192,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { }); it('shows all saved objects', async () => { - const objects = await PageObjects.settings.getSavedObjectsInTable(); + const objects = await PageObjects.savedObjects.getRowTitles(); expect(objects).to.eql([ 'Advanced Settings [6.0.0]', `Advanced Settings [${version}]`, @@ -196,7 +203,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { }); it('cannot view any saved objects in applications', async () => { - const bools = await PageObjects.settings.getSavedObjectsTableSummary(); + const bools = await PageObjects.savedObjects.getTableSummary(); expect(bools).to.eql([ { title: 'Advanced Settings [6.0.0]', @@ -222,8 +229,8 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { }); it(`can't delete all saved objects`, async () => { - await PageObjects.settings.clickSavedObjectsTableSelectAll(); - const actual = await PageObjects.settings.canSavedObjectsBeDeleted(); + await PageObjects.savedObjects.clickTableSelectAll(); + const actual = await PageObjects.savedObjects.canBeDeleted(); expect(actual).to.be(false); }); }); diff --git a/x-pack/test/functional/apps/uptime/locations.ts b/x-pack/test/functional/apps/uptime/locations.ts index 27c42a365ec74d..8aefca6a70195d 100644 --- a/x-pack/test/functional/apps/uptime/locations.ts +++ b/x-pack/test/functional/apps/uptime/locations.ts @@ -11,41 +11,58 @@ import { FtrProviderContext } from '../../ftr_provider_context'; export default ({ getPageObjects, getService }: FtrProviderContext) => { const { uptime: uptimePage } = getPageObjects(['uptime']); const uptime = getService('uptime'); + const es = getService('legacyEs'); const monitor = () => uptime.monitor; + const MONITOR_ID = 'location-testing-id'; + + const LessAvailMonitor = 'less-availability-monitor'; + + const addMonitorWithNoLocation = async () => { + /** + * This mogrify function will strip the documents of their location + * data (but preserve their location name), which is necessary for + * this test to work as desired. + * @param d current document + */ + const mogrifyNoLocation = (d: any) => { + if (d.observer?.geo?.location) { + d.observer.geo.location = undefined; + } + return d; + }; + await makeChecksWithStatus(es, MONITOR_ID, 5, 2, 10000, {}, 'up', mogrifyNoLocation); + }; + + const addLessAvailMonitor = async () => { + await makeChecksWithStatus(es, LessAvailMonitor, 5, 2, 10000, {}, 'up'); + await makeChecksWithStatus(es, LessAvailMonitor, 5, 2, 10000, {}, 'down'); + }; describe('Observer location', () => { const start = moment().subtract('15', 'm').toISOString(); const end = moment().toISOString(); - const MONITOR_ID = 'location-testing-id'; + before(async () => { + await addMonitorWithNoLocation(); + await addLessAvailMonitor(); + await uptime.navigation.goToUptime(); + await uptimePage.goToRoot(true); + }); beforeEach(async () => { - /** - * This mogrify function will strip the documents of their location - * data (but preserve their location name), which is necessary for - * this test to work as desired. - * @param d current document - */ - const mogrifyNoLocation = (d: any) => { - if (d.observer?.geo?.location) { - d.observer.geo.location = undefined; - } - return d; - }; - await makeChecksWithStatus( - getService('legacyEs'), - MONITOR_ID, - 5, - 2, - 10000, - {}, - 'up', - mogrifyNoLocation - ); - await uptime.navigation.goToUptime(); + await addMonitorWithNoLocation(); + await addLessAvailMonitor(); + if (!(await uptime.navigation.isOnDetailsPage())) + await uptimePage.loadDataAndGoToMonitorPage(start, end, MONITOR_ID); + }); + + it('displays the overall availability', async () => { + await monitor().displayOverallAvailability('100.00 %'); + }); - await uptimePage.loadDataAndGoToMonitorPage(start, end, MONITOR_ID); + it('can change the view to map', async () => { + await monitor().toggleToMapView(); }); it('renders the location panel and canvas', async () => { @@ -55,5 +72,11 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { it('renders the location missing popover when monitor has location name, but no geo data', async () => { await monitor().locationMissingExists(); }); + + it('displays less monitor availability', async () => { + await uptime.navigation.goToHomeViaBreadCrumb(); + await uptimePage.loadDataAndGoToMonitorPage(start, end, LessAvailMonitor); + await monitor().displayOverallAvailability('50.00 %'); + }); }); }; diff --git a/x-pack/test/functional/page_objects/copy_saved_objects_to_space_page.ts b/x-pack/test/functional/page_objects/copy_saved_objects_to_space_page.ts index 69e79d63d5fd56..03596aa68dbc6a 100644 --- a/x-pack/test/functional/page_objects/copy_saved_objects_to_space_page.ts +++ b/x-pack/test/functional/page_objects/copy_saved_objects_to_space_page.ts @@ -10,21 +10,17 @@ function extractCountFromSummary(str: string) { return parseInt(str.split('\n')[1], 10); } -export function CopySavedObjectsToSpacePageProvider({ getService }: FtrProviderContext) { +export function CopySavedObjectsToSpacePageProvider({ + getService, + getPageObjects, +}: FtrProviderContext) { const testSubjects = getService('testSubjects'); - const browser = getService('browser'); const find = getService('find'); + const { savedObjects } = getPageObjects(['savedObjects']); return { - async searchForObject(objectName: string) { - const searchBox = await testSubjects.find('savedObjectSearchBar'); - await searchBox.clearValue(); - await searchBox.type(objectName); - await searchBox.pressKeys(browser.keys.ENTER); - }, - async openCopyToSpaceFlyoutForObject(objectName: string) { - await this.searchForObject(objectName); + await savedObjects.searchForObject(objectName); // Click action button to show context menu await find.clickByCssSelector( diff --git a/x-pack/test/functional/services/uptime/common.ts b/x-pack/test/functional/services/uptime/common.ts index b5be1e29a0e8cb..5f544b5e460106 100644 --- a/x-pack/test/functional/services/uptime/common.ts +++ b/x-pack/test/functional/services/uptime/common.ts @@ -58,13 +58,13 @@ export function UptimeCommonProvider({ getService }: FtrProviderContext) { '[data-test-subj="xpack.uptime.filterBar.filterStatusUp"]' ); if (await upFilter.elementHasClass('euiFilterButton-hasActiveFilters')) { - this.setStatusFilterUp(); + await this.setStatusFilterUp(); } const downFilter = await find.byCssSelector( '[data-test-subj="xpack.uptime.filterBar.filterStatusDown"]' ); if (await downFilter.elementHasClass('euiFilterButton-hasActiveFilters')) { - this.setStatusFilterDown(); + await this.setStatusFilterDown(); } }, async selectFilterItem(filterType: string, option: string) { diff --git a/x-pack/test/functional/services/uptime/monitor.ts b/x-pack/test/functional/services/uptime/monitor.ts index 3137711698ba48..593950fbb7619c 100644 --- a/x-pack/test/functional/services/uptime/monitor.ts +++ b/x-pack/test/functional/services/uptime/monitor.ts @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ +import expect from '@kbn/expect/expect.js'; import { FtrProviderContext } from '../../ftr_provider_context'; export function UptimeMonitorProvider({ getService }: FtrProviderContext) { @@ -17,6 +18,13 @@ export function UptimeMonitorProvider({ getService }: FtrProviderContext) { timeout: 3000, }); }, + async displayOverallAvailability(availabilityVal: string) { + return retry.tryForTime(60 * 1000, async () => { + await testSubjects.existOrFail('uptimeOverallAvailability'); + const availability = await testSubjects.getVisibleText('uptimeOverallAvailability'); + expect(availability).to.be(availabilityVal); + }); + }, async locationMapIsRendered() { return retry.tryForTime(15000, async () => { await testSubjects.existOrFail('xpack.uptime.locationMap.embeddedPanel', { @@ -45,5 +53,8 @@ export function UptimeMonitorProvider({ getService }: FtrProviderContext) { ); }); }, + async toggleToMapView() { + await testSubjects.click('uptimeMonitorToggleMapBtn'); + }, }; } diff --git a/x-pack/test/functional/services/uptime/navigation.ts b/x-pack/test/functional/services/uptime/navigation.ts index 7c5a4632f86278..f8e0c0cff41f4d 100644 --- a/x-pack/test/functional/services/uptime/navigation.ts +++ b/x-pack/test/functional/services/uptime/navigation.ts @@ -56,6 +56,7 @@ export function UptimeNavigationProvider({ getService, getPageObjects }: FtrProv }, goToMonitor: async (monitorId: string) => { + // only go to monitor page if not already there if (!(await testSubjects.exists('uptimeMonitorPage', { timeout: 0 }))) { await testSubjects.click(`monitor-page-link-${monitorId}`); await testSubjects.existOrFail('uptimeMonitorPage', { @@ -80,5 +81,13 @@ export function UptimeNavigationProvider({ getService, getPageObjects }: FtrProv await PageObjects.timePicker.setAbsoluteRange(dateStart, dateEnd); await this.goToMonitor(monitorId); }, + + async isOnDetailsPage() { + return await testSubjects.exists('uptimeMonitorPage', { timeout: 0 }); + }, + + async goToHomeViaBreadCrumb() { + await testSubjects.click('breadcrumb first'); + }, }; } diff --git a/x-pack/test/security_solution_endpoint/apps/endpoint/index.ts b/x-pack/test/security_solution_endpoint/apps/endpoint/index.ts index 199d138d1c450a..d94ee260b27820 100644 --- a/x-pack/test/security_solution_endpoint/apps/endpoint/index.ts +++ b/x-pack/test/security_solution_endpoint/apps/endpoint/index.ts @@ -5,10 +5,13 @@ */ import { FtrProviderContext } from '../../ftr_provider_context'; -export default function ({ loadTestFile }: FtrProviderContext) { +export default function ({ loadTestFile, getService }: FtrProviderContext) { describe('endpoint', function () { this.tags('ciGroup7'); - + const ingestManager = getService('ingestManager'); + before(async () => { + await ingestManager.setup(); + }); loadTestFile(require.resolve('./endpoint_list')); loadTestFile(require.resolve('./policy_list')); loadTestFile(require.resolve('./policy_details')); diff --git a/yarn.lock b/yarn.lock index 6e307e8f1cc0d0..9caa949d239578 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5439,6 +5439,13 @@ dependencies: "@types/linkify-it" "*" +"@types/md5@^2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@types/md5/-/md5-2.2.0.tgz#cd82e16b95973f94bb03dee40c5b6be4a7fb7fb4" + integrity sha512-JN8OVL/wiDlCWTPzplsgMPu0uE9Q6blwp68rYsfk2G8aokRUQ8XD9MEhZwihfAiQvoyE+m31m6i3GFXwYWomKQ== + dependencies: + "@types/node" "*" + "@types/memoize-one@^4.1.0": version "4.1.1" resolved "https://registry.yarnpkg.com/@types/memoize-one/-/memoize-one-4.1.1.tgz#41dd138a4335b5041f7d8fc038f9d593d88b3369"