Move into components

elastic · Dec 4, 2024 · 48ad2fa · 48ad2fa
1 parent e771b82
commit 48ad2fa
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 67 deletions.
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_fetch_entities.ts b/x-pack/plugins/observability_solution/investigate_app/public/hooks/use_fetch_entities.ts
@@ -51,9 +51,6 @@ export function useFetchEntities({
     },
     refetchOnWindowFocus: false,
     retry: false,
-    onError: (error: Error) => {
-      // ignore error
-    },
     enabled: Boolean(investigationId && (serviceName || hostName || containerId)),
   });
 

diff --git a/...stigate_app/public/pages/details/components/assistant_hypothesis/assistant_hypothesis.tsx b/...stigate_app/public/pages/details/components/assistant_hypothesis/assistant_hypothesis.tsx
@@ -4,28 +4,29 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import dedent from 'dedent';
+import { EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EntityWithSource } from '@kbn/investigation-shared';
 import {
+  ALERT_REASON,
+  ALERT_RULE_CATEGORY,
   ALERT_RULE_PARAMETERS,
   ALERT_START,
-  ALERT_RULE_CATEGORY,
-  ALERT_REASON,
 } from '@kbn/rule-data-utils';
-import { i18n } from '@kbn/i18n';
-import { EntityWithSource } from '@kbn/investigation-shared';
+import dedent from 'dedent';
 import React, { useCallback } from 'react';
+import { useFetchEntities } from '../../../../hooks/use_fetch_entities';
 import { useKibana } from '../../../../hooks/use_kibana';
 import { useInvestigation } from '../../contexts/investigation_context';
-import { useFetchEntities } from '../../../../hooks/use_fetch_entities';
 
 export interface InvestigationContextualInsight {
   key: string;
   description: string;
   data: unknown;
 }
 
-export function AssistantHypothesis({ investigationId }: { investigationId: string }) {
-  const { alert } = useInvestigation();
+export function AssistantHypothesis() {
+  const { alert, investigation } = useInvestigation();
   const {
     dependencies: {
       start: {
@@ -37,7 +38,7 @@ export function AssistantHypothesis({ investigationId }: { investigationId: stri
     },
   } = useKibana();
   const { data: entitiesData } = useFetchEntities({
-    investigationId,
+    investigationId: investigation!.id,
     serviceName: alert?.['service.name'] ? `${alert?.['service.name']}` : undefined,
     serviceEnvironment: alert?.['service.environment']
       ? `${alert?.['service.environment']}`
@@ -99,13 +100,15 @@ export function AssistantHypothesis({ investigationId }: { investigationId: stri
   }
 
   return alert && entitiesData ? (
-    <ObservabilityAIAssistantContextualInsight
-      title={i18n.translate(
-        'xpack.investigateApp.assistantHypothesis.observabilityAIAssistantContextualInsight.helpMeInvestigateThisLabel',
-        { defaultMessage: 'Help me investigate this failure' }
-      )}
-      messages={getAlertContextMessages}
-    />
+    <EuiFlexItem grow={false}>
+      <ObservabilityAIAssistantContextualInsight
+        title={i18n.translate(
+          'xpack.investigateApp.assistantHypothesis.observabilityAIAssistantContextualInsight.helpMeInvestigateThisLabel',
+          { defaultMessage: 'Help me investigate this failure' }
+        )}
+        messages={getAlertContextMessages}
+      />
+    </EuiFlexItem>
   ) : null;
 }
 const formatEntityMetrics = (entity: EntityWithSource): string => {

diff --git a/...vestigate_app/public/pages/details/components/investigation_items/investigation_items.tsx b/...vestigate_app/public/pages/details/components/investigation_items/investigation_items.tsx
@@ -5,31 +5,19 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
-import { useInvestigation } from '../../contexts/investigation_context';
 import { AddInvestigationItem } from '../add_investigation_item/add_investigation_item';
 import { AssistantHypothesis } from '../assistant_hypothesis/assistant_hypothesis';
 import { InvestigationItemsList } from '../investigation_items_list/investigation_items_list';
 import { InvestigationTimeline } from '../investigation_timeline/investigation_timeline';
 
 export function InvestigationItems() {
-  const { investigation } = useInvestigation();
-
   return (
-    <EuiFlexGroup direction="column" gutterSize="s" responsive>
+    <EuiFlexGroup direction="column" gutterSize="m" responsive>
       <InvestigationTimeline />
-
-      {investigation?.id && (
-        <EuiFlexItem grow={false}>
-          <AssistantHypothesis investigationId={investigation.id} />
-        </EuiFlexItem>
-      )}
-
-      <EuiFlexItem grow={false}>
-        <InvestigationItemsList />
-      </EuiFlexItem>
-
+      <AssistantHypothesis />
+      <InvestigationItemsList />
       <AddInvestigationItem />
     </EuiFlexGroup>
   );

diff --git a/...ents/investigation_timeline/investigation_search_bar/investigation_event_types_filter.tsx b/...ents/investigation_timeline/investigation_search_bar/investigation_event_types_filter.tsx
@@ -9,6 +9,7 @@ import {
   EuiFilterButton,
   EuiFilterGroup,
   EuiPopover,
+  EuiPopoverTitle,
   EuiSelectable,
   EuiSelectableOption,
   useGeneratedHtmlId,
@@ -25,22 +26,16 @@ export function InvestigationEventTypesFilter({ onSelected }: Props) {
   const [items, setItems] = useState<EuiSelectableOption[]>([
     {
       key: 'alert',
-      label: i18n.translate(
-        'xpack.investigateApp.investigationEventTypesFilter.alertEventTypeLabel',
-        {
-          defaultMessage: 'Alert',
-        }
-      ),
+      label: i18n.translate('xpack.investigateApp.investigationEventTypesFilter.alertLabel', {
+        defaultMessage: 'Alert',
+      }),
       checked: 'on',
     },
     {
       key: 'annotation',
-      label: i18n.translate(
-        'xpack.investigateApp.investigationEventTypesFilter.annotationEventTypeLabel',
-        {
-          defaultMessage: 'Annotation',
-        }
-      ),
+      label: i18n.translate('xpack.investigateApp.investigationEventTypesFilter.annotationLabel', {
+        defaultMessage: 'Annotation',
+      }),
       checked: 'on',
     },
   ]);
@@ -93,7 +88,17 @@ export function InvestigationEventTypesFilter({ onSelected }: Props) {
         panelPaddingSize="none"
       >
         <EuiSelectable options={items} onChange={handleChange}>
-          {(list) => <div style={{ width: 200 }}>{list}</div>}
+          {(list) => (
+            <div style={{ width: 200 }}>
+              <EuiPopoverTitle paddingSize="s">
+                {i18n.translate(
+                  'xpack.investigateApp.investigationEventTypesFilter.filterEventTypePopoverTitleLabel',
+                  { defaultMessage: 'Filter event type' }
+                )}
+              </EuiPopoverTitle>
+              {list}
+            </div>
+          )}
         </EuiSelectable>
       </EuiPopover>
     </EuiFilterGroup>

diff --git a/...s/components/investigation_timeline/investigation_search_bar/investigation_search_bar.tsx b/...s/components/investigation_timeline/investigation_search_bar/investigation_search_bar.tsx
@@ -4,10 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { TimeRange } from '@kbn/es-query';
-import { i18n } from '@kbn/i18n';
 import type { SearchBar } from '@kbn/unified-search-plugin/public';
 import React from 'react';
 import { useKibana } from '../../../../../hooks/use_kibana';
@@ -46,26 +45,11 @@ export function InvestigationSearchBar({
       justifyContent="spaceBetween"
       responsive
       css={css`
-        padding-left: 8px;
-        padding-right: 8px;
-        padding-top: 8px;
+        padding: 8px 8px 0px 8px;
         max-height: fit-content;
       `}
     >
-      <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiText size="s">
-            <h5>
-              {i18n.translate('xpack.investigateApp.investigationSearchBar.eventsTitleLabel', {
-                defaultMessage: 'Events',
-              })}
-            </h5>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <InvestigationEventTypesFilter onSelected={onEventTypesSelected} />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <InvestigationEventTypesFilter onSelected={onEventTypesSelected} />
 
       <EuiFlexItem grow={false}>
         <SearchBar