[AI4DSOR] Alert summary integrations section

x-pack/platform/plugins/shared/fleet/common/index.ts

@@ -122,6 +122,7 @@ export type {
   // Models
   Agent,
   AgentStatus,
+  DataStream,
   FleetServerAgentMetadata,
   AgentMetadata,
   NewAgentPolicy,

x-pack/platform/plugins/shared/fleet/public/index.ts

@@ -91,6 +91,7 @@ export const AvailablePackagesHook = () => {
   );
 };
 
+export { useGetDataStreams } from './hooks/use_request/data_stream';
 export { useGetPackagesQuery } from './hooks/use_request/epm';
 export { useGetSettingsQuery } from './hooks/use_request/settings';
 export { useLink } from './hooks/use_link';

x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/integrations/integration_card.test.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import type { PackageListItem } from '@kbn/fleet-plugin/common';
+import { installationStatuses } from '@kbn/fleet-plugin/common/constants';
+import {
+  IntegrationCard,
+  LAST_ACTIVITY_LOADING_SKELETON_TEST_ID,
+  LAST_ACTIVITY_VALUE_TEST_ID,
+} from './integration_card';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+
+jest.mock('@kbn/kibana-react-plugin/public');
+
+const dataTestSubj = 'test-id';
+const integration: PackageListItem = {
+  id: 'splunk',
+  icons: [{ src: 'icon.svg', path: 'mypath/icon.svg', type: 'image/svg+xml' }],
+  name: 'splunk',
+  status: installationStatuses.NotInstalled,
+  title: 'Splunk',
+  version: '0.1.0',
+};
+
+describe('<IntegrationCard />', () => {
+  beforeEach(() => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: { http: { basePath: { prepend: jest.fn() } } },
+    });
+  });
+
+  it('should render the card with skeleton while loading last activity', () => {
+    const { getByTestId, queryByTestId } = render(
+      <IntegrationCard
+        data-test-subj={dataTestSubj}
+        integration={integration}
+        isLoading={true}
+        lastActivity={undefined}
+      />
+    );
+
+    expect(getByTestId(dataTestSubj)).toHaveTextContent('Splunk');
+    expect(
+      getByTestId(`${dataTestSubj}${LAST_ACTIVITY_LOADING_SKELETON_TEST_ID}`)
+    ).toBeInTheDocument();
+    expect(queryByTestId(`${dataTestSubj}${LAST_ACTIVITY_VALUE_TEST_ID}`)).not.toBeInTheDocument();
+  });
+
+  it('should render the card with last activity value', () => {
+    const lastActivity = 1735711200000; // Wed Jan 01 2025 00:00:00 GMT-0600 (Central Standard Time)
+    const { getByTestId, queryByTestId } = render(
+      <IntegrationCard
+        data-test-subj={dataTestSubj}
+        integration={integration}
+        isLoading={false}
+        lastActivity={lastActivity}
+      />
+    );
+
+    expect(
+      queryByTestId(`${dataTestSubj}${LAST_ACTIVITY_LOADING_SKELETON_TEST_ID}`)
+    ).not.toBeInTheDocument();
+    expect(getByTestId(`${dataTestSubj}${LAST_ACTIVITY_VALUE_TEST_ID}`)).toHaveTextContent(
+      'Last synced: 2025-01-01T06:00:00Z'
+    );
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/integrations/integration_card.tsx

@@ -0,0 +1,118 @@
+/*
+ * 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 React, { memo } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSkeletonText,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import type { PackageListItem } from '@kbn/fleet-plugin/common';
+import { CardIcon } from '@kbn/fleet-plugin/public';
+import { FormattedRelativePreferenceDate } from '../../../../common/components/formatted_date';
+
+const LAST_SYNCED = i18n.translate(
+  'xpack.securitySolution.alertSummary.integrations.lastSyncedLabel',
+  {
+    defaultMessage: 'Last synced: ',
+  }
+);
+
+const MIN_WIDTH = 200;
+
+export const LAST_ACTIVITY_LOADING_SKELETON_TEST_ID = '-last-activity-loading-skeleton';
+export const LAST_ACTIVITY_VALUE_TEST_ID = '-last-activity-value';
+
+export interface IntegrationProps {
+  /**
+   * Installed AI for SOC integration
+   */
+  integration: PackageListItem;
+  /**
+   * True while retrieving data streams to provide the last activity value
+   */
+  isLoading: boolean;
+  /**
+   * Timestamp of the last time the integration synced (via data streams)
+   */
+  lastActivity: number | undefined;
+  /**
+   * Data test subject string for testing
+   */
+  ['data-test-subj']?: string;
+}
+
+/**
+ * Rendered on the alert summary page. The card displays the icon, name and last sync value.
+ */
+export const IntegrationCard = memo(
+  ({ 'data-test-subj': dataTestSubj, integration, isLoading, lastActivity }: IntegrationProps) => {
+    const { euiTheme } = useEuiTheme();
+
+    return (
+      <EuiPanel
+        css={css`
+          min-width: ${MIN_WIDTH}px;
+        `}
+        data-test-subj={dataTestSubj}
+        hasBorder={true}
+        hasShadow={false}
+        paddingSize="s"
+      >
+        <EuiFlexGroup gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <CardIcon
+              icons={integration.icons}
+              integrationName={integration.title}
+              packageName={integration.name}
+              size="xl"
+              version={integration.version}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem>
+                <EuiText
+                  css={css`
+                    font-weight: ${euiTheme.font.weight.medium};
+                  `}
+                  size="xs"
+                >
+                  {integration.title}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiSkeletonText
+                  data-test-subj={`${dataTestSubj}${LAST_ACTIVITY_LOADING_SKELETON_TEST_ID}`}
+                  isLoading={isLoading}
+                  lines={1}
+                  size="xs"
+                >
+                  <EuiText
+                    color="subdued"
+                    data-test-subj={`${dataTestSubj}${LAST_ACTIVITY_VALUE_TEST_ID}`}
+                    size="xs"
+                  >
+                    {LAST_SYNCED}
+                    <FormattedRelativePreferenceDate value={lastActivity} />
+                  </EuiText>
+                </EuiSkeletonText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    );
+  }
+);
+
+IntegrationCard.displayName = 'IntegrationCard';

x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/integrations/integration_section.test.tsx

@@ -0,0 +1,84 @@
+/*
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import type { PackageListItem } from '@kbn/fleet-plugin/common';
+import { installationStatuses } from '@kbn/fleet-plugin/common/constants';
+import {
+  ADD_INTEGRATIONS_BUTTON_TEST_ID,
+  CARD_TEST_ID,
+  IntegrationSection,
+} from './integration_section';
+import { useAddIntegrationsUrl } from '../../../../common/hooks/use_add_integrations_url';
+import { useIntegrationsLastActivity } from '../../../hooks/alert_summary/use_integrations_last_activity';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+
+jest.mock('../../../../common/hooks/use_add_integrations_url');
+jest.mock('../../../hooks/alert_summary/use_integrations_last_activity');
+jest.mock('@kbn/kibana-react-plugin/public');
+
+const packages: PackageListItem[] = [
+  {
+    id: 'splunk',
+    name: 'splunk',
+    icons: [{ src: 'icon.svg', path: 'mypath/icon.svg', type: 'image/svg+xml' }],
+    status: installationStatuses.Installed,
+    title: 'Splunk',
+    version: '',
+  },
+  {
+    id: 'google_secops',
+    name: 'google_secops',
+    icons: [{ src: 'icon.svg', path: 'mypath/icon.svg', type: 'image/svg+xml' }],
+    status: installationStatuses.Installed,
+    title: 'Google SecOps',
+    version: '',
+  },
+];
+
+describe('<IntegrationSection />', () => {
+  beforeEach(() => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        application: { navigateToApp: jest.fn() },
+        http: {
+          basePath: {
+            prepend: jest.fn().mockReturnValue('/app/integrations/detail/splunk-0.1.0/overview'),
+          },
+        },
+      },
+    });
+  });
+
+  it('should render a card for each integration ', () => {
+    (useAddIntegrationsUrl as jest.Mock).mockReturnValue({ onClick: jest.fn() });
+    (useIntegrationsLastActivity as jest.Mock).mockReturnValue({
+      isLoading: true,
+      lastActivities: {},
+    });
+
+    const { getByTestId } = render(<IntegrationSection packages={packages} />);
+
+    expect(getByTestId(`${CARD_TEST_ID}splunk`)).toHaveTextContent('Splunk');
+    expect(getByTestId(`${CARD_TEST_ID}google_secops`)).toHaveTextContent('Google SecOps');
+  });
+
+  it('should navigate to the fleet page when clicking on the add integrations button', () => {
+    const addIntegration = jest.fn();
+    (useAddIntegrationsUrl as jest.Mock).mockReturnValue({
+      onClick: addIntegration,
+    });
+    (useIntegrationsLastActivity as jest.Mock).mockReturnValue([]);
+
+    const { getByTestId } = render(<IntegrationSection packages={[]} />);
+
+    getByTestId(ADD_INTEGRATIONS_BUTTON_TEST_ID).click();
+
+    expect(addIntegration).toHaveBeenCalled();
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/integrations/integration_section.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 React, { memo } from 'react';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import type { PackageListItem } from '@kbn/fleet-plugin/common';
+import { useIntegrationsLastActivity } from '../../../hooks/alert_summary/use_integrations_last_activity';
+import { IntegrationCard } from './integration_card';
+import { useAddIntegrationsUrl } from '../../../../common/hooks/use_add_integrations_url';
+
+const ADD_INTEGRATION = i18n.translate(
+  'xpack.securitySolution.alertSummary.integrations.addIntegrationButtonLabel',
+  {
+    defaultMessage: 'Add integration',
+  }
+);
+
+export const CARD_TEST_ID = 'alert-summary-integration-card-';
+export const ADD_INTEGRATIONS_BUTTON_TEST_ID = 'alert-summary-add-integrations-button';
+
+export interface IntegrationSectionProps {
+  /**
+   * List of installed AI for SOC integrations
+   */
+  packages: PackageListItem[];
+}
+
+/**
+ * Section rendered at the top of the alert summary page. It displays all the AI for SOC installed integrations
+ * and allow the user to add more integrations by clicking on a button that links to a Fleet page.
+ * Each integration card is also displaying the last time the sync happened (using streams).
+ */
+export const IntegrationSection = memo(({ packages }: IntegrationSectionProps) => {
+  const { onClick: addIntegration } = useAddIntegrationsUrl(); // TODO this link might have to be revisited once the integration work is done
+  const { isLoading, lastActivities } = useIntegrationsLastActivity({ packages });
+
+  return (
+    <EuiFlexGroup gutterSize="m" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="m" alignItems="center" wrap>
+          {packages.map((pkg) => (
+            <EuiFlexItem grow={false} key={pkg.name}>
+              <IntegrationCard
+                data-test-subj={`${CARD_TEST_ID}${pkg.name}`}
+                integration={pkg}
+                isLoading={isLoading}
+                lastActivity={lastActivities[pkg.name]}
+              />
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          data-test-subj={ADD_INTEGRATIONS_BUTTON_TEST_ID}
+          iconType="plusInCircle"
+          onClick={addIntegration}
+        >
+          {ADD_INTEGRATION}
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+});
+
+IntegrationSection.displayName = 'IntegrationSection';