[8.x] feat(rca): add header details (#193600)

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 (
+    <EuiFlexItem grow={false}>
+      <EuiBadge color="hollow">{tag}</EuiBadge>
+    </EuiFlexItem>
+  );
+}

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 (
+    <EuiButtonEmpty
+      data-test-subj="investigationDetailsAlertLink"
+      iconType="arrowLeft"
+      size="xs"
+      href={basePath.prepend(`/app/observability/alerts/${alertId}`)}
+    >
+      <EuiText size="s">{`[Alert] ${alertDetails?.[ALERT_RULE_CATEGORY]} breached`}</EuiText>
+    </EuiButtonEmpty>
+  );
+}

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 && (
-        <EuiButtonEmpty
-          data-test-subj="investigationDetailsAlertLink"
-          iconType="arrowLeft"
-          size="xs"
-          href={basePath.prepend(`/app/observability/alerts/${alertId}`)}
-        >
-          <EuiText size="s">{`[Alert] ${alertDetails?.[ALERT_RULE_CATEGORY]} breached`}</EuiText>
-        </EuiButtonEmpty>
-      )}
-      {investigation && <div>{investigation.title}</div>}
-    </>
+    <EuiFlexGroup direction="column" gutterSize="m" alignItems="flexStart">
+      <EuiFlexItem>
+        <AlertDetailsButton />
+      </EuiFlexItem>
+
+      <EuiFlexItem>{investigation.title}</EuiFlexItem>
+
+      <EuiFlexGroup direction="row" gutterSize="m" alignItems="center" wrap responsive={false}>
+        <EuiFlexItem grow={false}>
+          <InvestigationStatusBadge status={investigation.status} />
+        </EuiFlexItem>
+
+        {investigation.tags.length > 0 && (
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup responsive={false} wrap gutterSize="s">
+              {investigation.tags.map((tag) => (
+                <InvestigationTag key={tag} tag={tag} />
+              ))}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        )}
+
+        <EuiFlexItem grow={false}>
+          <EuiText size="s">
+            <FormattedMessage
+              id="xpack.investigateApp.investigationHeader.startedLabel"
+              defaultMessage="Started: {timeAgo}"
+              values={{
+                timeAgo: (
+                  <strong>
+                    {formatDistance(new Date(investigation.createdAt), new Date(), {
+                      addSuffix: true,
+                    })}
+                  </strong>
+                ),
+              }}
+            />
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexGroup>
   );
 }

x-pack/plugins/observability_solution/investigate_app/public/hooks/use_get_alert_details.tsx → 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;

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 (
           <EuiFlexGroup wrap gutterSize="xs">
             {value.map((tag) => (
-              <EuiFlexItem key={tag} grow={false}>
-                <EuiBadge color="hollow">{tag}</EuiBadge>
-              </EuiFlexItem>
+              <InvestigationTag key={tag} tag={tag} />
             ))}
           </EuiFlexGroup>
         );

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);