From 0b1bf2727b565c5dc1b824c9b076e6bc0514f2a9 Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Fri, 20 Sep 2024 12:34:23 -0400 Subject: [PATCH] feat(rca): add header details (#193600) --- .../investigation_tag/investigation_tag.tsx | 21 +++++ .../alert_details_button.tsx | 41 ++++++++++ .../investigation_header.tsx | 78 ++++++++++++------- .../details/hooks/use_fetch_alert.tsx} | 2 +- .../list/components/investigation_list.tsx | 7 +- .../services/delete_investigation_item.ts | 4 +- 6 files changed, 118 insertions(+), 35 deletions(-) create mode 100644 x-pack/plugins/observability_solution/investigate_app/public/components/investigation_tag/investigation_tag.tsx create mode 100644 x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/alert_details_button.tsx rename x-pack/plugins/observability_solution/investigate_app/public/{hooks/use_get_alert_details.tsx => pages/details/hooks/use_fetch_alert.tsx} (96%) diff --git a/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_tag/investigation_tag.tsx b/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_tag/investigation_tag.tsx new file mode 100644 index 0000000000000..938f4ce434c82 --- /dev/null +++ b/x-pack/plugins/observability_solution/investigate_app/public/components/investigation_tag/investigation_tag.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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiFlexItem, EuiBadge } from '@elastic/eui'; +import React from 'react'; + +interface Props { + tag: string; +} + +export function InvestigationTag({ tag }: Props) { + return ( + + {tag} + + ); +} diff --git a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/alert_details_button.tsx b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/alert_details_button.tsx new file mode 100644 index 0000000000000..ff33ca7949f75 --- /dev/null +++ b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/alert_details_button.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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiButtonEmpty, EuiText } from '@elastic/eui'; +import { alertOriginSchema } from '@kbn/investigation-shared'; +import { ALERT_RULE_CATEGORY } from '@kbn/rule-registry-plugin/common/technical_rule_data_field_names'; +import React from 'react'; +import { useKibana } from '../../../../hooks/use_kibana'; +import { useInvestigation } from '../../contexts/investigation_context'; +import { useFetchAlert } from '../../hooks/use_fetch_alert'; + +export function AlertDetailsButton() { + const { + core: { + http: { basePath }, + }, + } = useKibana(); + const { investigation } = useInvestigation(); + + const alertOriginInvestigation = alertOriginSchema.safeParse(investigation?.origin); + const alertId = alertOriginInvestigation.success ? alertOriginInvestigation.data.id : undefined; + const { data: alertDetails } = useFetchAlert({ id: alertId }); + + if (!alertDetails) { + return null; + } + return ( + + {`[Alert] ${alertDetails?.[ALERT_RULE_CATEGORY]} breached`} + + ); +} diff --git a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/investigation_header.tsx b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/investigation_header.tsx index 1987777de4968..339f2ce1be8e7 100644 --- a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/investigation_header.tsx +++ b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/investigation_header.tsx @@ -5,40 +5,64 @@ * 2.0. */ -import { EuiButtonEmpty, EuiText } from '@elastic/eui'; -import { alertOriginSchema } from '@kbn/investigation-shared'; -import { ALERT_RULE_CATEGORY } from '@kbn/rule-registry-plugin/common/technical_rule_data_field_names'; +import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { formatDistance } from 'date-fns'; +import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; -import { useFetchAlert } from '../../../../hooks/use_get_alert_details'; -import { useKibana } from '../../../../hooks/use_kibana'; +import { InvestigationStatusBadge } from '../../../../components/investigation_status_badge/investigation_status_badge'; +import { InvestigationTag } from '../../../../components/investigation_tag/investigation_tag'; import { useInvestigation } from '../../contexts/investigation_context'; +import { AlertDetailsButton } from './alert_details_button'; export function InvestigationHeader() { - const { - core: { - http: { basePath }, - }, - } = useKibana(); - const { investigation } = useInvestigation(); - const alertOriginInvestigation = alertOriginSchema.safeParse(investigation?.origin); - const alertId = alertOriginInvestigation.success ? alertOriginInvestigation.data.id : undefined; - const { data: alertDetails } = useFetchAlert({ id: alertId }); + if (!investigation) { + return null; + } return ( - <> - {alertDetails && ( - - {`[Alert] ${alertDetails?.[ALERT_RULE_CATEGORY]} breached`} - - )} - {investigation &&
{investigation.title}
} - + + + + + + {investigation.title} + + + + + + + {investigation.tags.length > 0 && ( + + + {investigation.tags.map((tag) => ( + + ))} + + + )} + + + + + {formatDistance(new Date(investigation.createdAt), new Date(), { + addSuffix: true, + })} + + ), + }} + /> + + + + ); } diff --git a/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_get_alert_details.tsx b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/hooks/use_fetch_alert.tsx similarity index 96% rename from x-pack/plugins/observability_solution/investigate_app/public/hooks/use_get_alert_details.tsx rename to x-pack/plugins/observability_solution/investigate_app/public/pages/details/hooks/use_fetch_alert.tsx index 0c0cda89d3eb8..85246b33bf70d 100644 --- a/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_get_alert_details.tsx +++ b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/hooks/use_fetch_alert.tsx @@ -7,7 +7,7 @@ import { useQuery } from '@tanstack/react-query'; import { BASE_RAC_ALERTS_API_PATH, EcsFieldsResponse } from '@kbn/rule-registry-plugin/common'; -import { useKibana } from './use_kibana'; +import { useKibana } from '../../../hooks/use_kibana'; export interface AlertParams { id?: string; diff --git a/x-pack/plugins/observability_solution/investigate_app/public/pages/list/components/investigation_list.tsx b/x-pack/plugins/observability_solution/investigate_app/public/pages/list/components/investigation_list.tsx index a65eb12001342..8ad2957b27ac8 100644 --- a/x-pack/plugins/observability_solution/investigate_app/public/pages/list/components/investigation_list.tsx +++ b/x-pack/plugins/observability_solution/investigate_app/public/pages/list/components/investigation_list.tsx @@ -7,11 +7,9 @@ import { Criteria, EuiAvatar, - EuiBadge, EuiBasicTable, EuiBasicTableColumn, EuiFlexGroup, - EuiFlexItem, EuiLink, EuiLoadingSpinner, EuiText, @@ -22,6 +20,7 @@ import moment from 'moment'; import React, { useState } from 'react'; import { paths } from '../../../../common/paths'; import { InvestigationStatusBadge } from '../../../components/investigation_status_badge/investigation_status_badge'; +import { InvestigationTag } from '../../../components/investigation_tag/investigation_tag'; import { useFetchInvestigationList } from '../../../hooks/use_fetch_investigation_list'; import { useFetchUserProfiles } from '../../../hooks/use_fetch_user_profiles'; import { useKibana } from '../../../hooks/use_kibana'; @@ -114,9 +113,7 @@ export function InvestigationList() { return ( {value.map((tag) => ( - - {tag} - + ))} ); diff --git a/x-pack/plugins/observability_solution/investigate_app/server/services/delete_investigation_item.ts b/x-pack/plugins/observability_solution/investigate_app/server/services/delete_investigation_item.ts index a9856cc0eaa99..29728404068be 100644 --- a/x-pack/plugins/observability_solution/investigate_app/server/services/delete_investigation_item.ts +++ b/x-pack/plugins/observability_solution/investigate_app/server/services/delete_investigation_item.ts @@ -16,11 +16,11 @@ export async function deleteInvestigationItem( const investigation = await repository.findById(investigationId); const item = investigation.items.find((currItem) => currItem.id === itemId); if (!item) { - throw new Error('Note not found'); + throw new Error('Item not found'); } if (item.createdBy !== user.profile_uid) { - throw new Error('User does not have permission to delete note'); + throw new Error('User does not have permission to delete item'); } investigation.items = investigation.items.filter((currItem) => currItem.id !== itemId);