[FEATURE] MDS support in Integrations for observability plugin

public/components/integrations/components/__tests__/__snapshots__/setup_integration.test.tsx.snap

@@ -42,6 +42,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                             "enabledWorkflows": Array [],
                           }
                         }
+                        handleSelectedDataSourceChange={[Function]}
                         integration={
                           Object {
                             "assets": Array [],
@@ -255,6 +256,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                   "enabledWorkflows": Array [],
                                 }
                               }
+                              handleSelectedDataSourceChange={[Function]}
                               integration={
                                 Object {
                                   "assets": Array [],
@@ -935,6 +937,8 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                             "enabledWorkflows": Array [],
                           }
                         }
+                        dataSourceMDSId=""
+                        dataSourceMDSLabel=""
                         integration={
                           Object {
                             "assets": Array [],

public/components/integrations/components/__tests__/added_integration_table.test.tsx

@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { waitFor } from '@testing-library/react';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import { waitFor } from '@testing-library/react';
-import { AddedIntegrationsTable } from '../added_integration_table';
-import { addedIntegrationData } from './testing_constants';
 import React from 'react';
+import { AddedIntegrationsTable } from '../added_integration_table';
+import { addedIntegrationData, addedIntegrationDataWithoutMDS } from './testing_constants';
 
 describe('Added Integration Table View Test', () => {
   configure({ adapter: new Adapter() });
@@ -20,4 +20,12 @@ describe('Added Integration Table View Test', () => {
       expect(wrapper).toMatchSnapshot();
     });
   });
+
+  it('Renders added integration table view using dummy data when MDS is disabled', async () => {
+    const wrapper = mount(<AddedIntegrationsTable {...addedIntegrationDataWithoutMDS} />);
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
 });

public/components/integrations/components/__tests__/testing_constants.ts

@@ -175,6 +175,90 @@ export const addedIntegrationData: AddedIntegrationsTableProps = {
   loading: false,
 };
 
+export const addedIntegrationDataWithoutMDS: AddedIntegrationsTableProps = {
+  setData: () => {},
+  http: httpClientMock,
+  data: {
+    hits: [
+      {
+        name: 'nginx',
+        templateName: 'nginx',
+        dataSource: { sourceType: 'logs', dataset: 'nginx', namespace: 'prod' },
+        creationDate: '2023-06-15T16:28:36.370Z',
+        status: 'active',
+        addedBy: 'admin',
+        assets: [
+          {
+            assetType: 'index-pattern',
+            assetId: '3fc41705-8a23-49f4-926c-2819e0d7306d',
+            status: 'available',
+            isDefaultAsset: false,
+            description: 'ss4o_logs-nginx-prod',
+          },
+          {
+            assetType: 'search',
+            assetId: 'a0415ddd-047d-4c02-8769-d14bfb70f525',
+            status: 'available',
+            isDefaultAsset: false,
+            description: '[NGINX Core Logs 1.0] Nginx Access Logs',
+          },
+          {
+            assetType: 'visualization',
+            assetId: 'a17cd453-fb2f-4c24-81db-aedfc8682829',
+            status: 'available',
+            isDefaultAsset: false,
+            description: '[NGINX Core Logs 1.0] Response codes over time',
+          },
+          {
+            assetType: 'search',
+            assetId: '3e47dfed-d9ff-4c1b-b425-04ffc8ed3fa9',
+            status: 'available',
+            isDefaultAsset: false,
+            description: '[NGINX Core Logs 1.0] Nginx Error Logs',
+          },
+          {
+            assetType: 'visualization',
+            assetId: '641c2a03-eead-4900-94ee-e12d2fef8383',
+            status: 'available',
+            isDefaultAsset: false,
+            description: '[NGINX Core Logs 1.0] Errors over time',
+          },
+          {
+            assetType: 'visualization',
+            assetId: 'ce61594d-8307-4358-9b7e-71101b3ed722',
+            status: 'available',
+            isDefaultAsset: false,
+            description: 'Data Volume',
+          },
+          {
+            assetType: 'visualization',
+            assetId: '452bd6e3-3b50-407f-88f2-c35a29c56051',
+            status: 'available',
+            isDefaultAsset: false,
+            description: 'Top Paths',
+          },
+          {
+            assetType: 'visualization',
+            assetId: '14a1ddab-08c1-4aba-ba3b-88bae36f7e50',
+            status: 'available',
+            isDefaultAsset: false,
+            description: 'Requests per Minute',
+          },
+          {
+            assetType: 'dashboard',
+            assetId: '179bad58-c840-4c6c-9fd8-1667c14bd03a',
+            status: 'available',
+            isDefaultAsset: true,
+            description: '[NGINX Core Logs 1.0] Overview',
+          },
+        ],
+        id: 'ad7e6e30-0b99-11ee-b27c-c9863222e9bf',
+      },
+    ],
+  },
+  loading: false,
+};
+
 export const testIntegrationInstanceData = {
   data: {
     id: 'ad7e6e30-0b99-11ee-b27c-c9863222e9bf',

public/components/integrations/components/added_integration.tsx

@@ -22,14 +22,16 @@ import {
   EuiTableFieldDataColumnType,
   EuiText,
 } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
 import truncate from 'lodash/truncate';
-import { PanelTitle } from '../../trace_analytics/components/common/helper_functions';
+import React, { useEffect, useState } from 'react';
+import { DataSourceViewConfig } from '../../../../../../src/plugins/data_source_management/public';
 import { ASSET_FILTER_OPTIONS } from '../../../../common/constants/integrations';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
+import { dataSourceFilterFn } from '../../../../common/utils/shared';
+import { useToast } from '../../../../public/components/common/toast';
 import { DeleteModal } from '../../common/helpers/delete_modal';
+import { PanelTitle } from '../../trace_analytics/components/common/helper_functions';
 import { AddedIntegrationProps } from './integration_types';
-import { useToast } from '../../../../public/components/common/toast';
 
 export const IntegrationHealthBadge = ({ status }: { status?: string }) => {
   switch (status) {
@@ -45,7 +47,14 @@ export const IntegrationHealthBadge = ({ status }: { status?: string }) => {
 };
 
 export function AddedIntegration(props: AddedIntegrationProps) {
-  const { http, integrationInstanceId, chrome } = props;
+  const {
+    http,
+    integrationInstanceId,
+    chrome,
+    dataSourceEnabled,
+    dataSourceManagement,
+    setActionMenu,
+  } = props;
 
   const { setToast } = useToast();
 
@@ -74,6 +83,8 @@ export function AddedIntegration(props: AddedIntegrationProps) {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
 
+  const DataSourceMenu = dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
+
   const activateDeleteModal = (integrationName?: string) => {
     setModalLayout(
       <DeleteModal
@@ -118,6 +129,22 @@ export function AddedIntegration(props: AddedIntegrationProps) {
 
     return (
       <EuiPageHeader style={{ justifyContent: 'spaceBetween' }}>
+        {dataSourceEnabled && (
+          <DataSourceMenu
+            setMenuMountPoint={setActionMenu}
+            componentType={'DataSourceView'}
+            componentConfig={{
+              activeOption: [
+                {
+                  id: data?.references?.[0]?.id,
+                  label: data?.references?.[0]?.name,
+                },
+              ],
+              fullWidth: true,
+              dataSourceFilter: dataSourceFilterFn,
+            }}
+          />
+        )}
         <EuiSpacer size="m" />
         <EuiPageHeaderSection style={{ width: '100%', justifyContent: 'space-between' }}>
           <EuiPageContentHeaderSection>

public/components/integrations/components/added_integration_overview_page.tsx

@@ -17,7 +17,7 @@
   data: AddedIntegrationsList;
   setData: React.Dispatch<React.SetStateAction<AddedIntegrationsList>>;
   http: HttpStart;
-  dataSourceEnabled: string;
+  dataSourceEnabled: boolean;
 }
 
 export interface AddedIntegrationsList {
@@ -27,12 +27,13 @@
 export interface AddedIntegrationType {
   name: string;
   templateName: string;
   dataSource: any;
   creationDate: string;
   status: string;
   assets: any[];
   addedBy: string;
   id: string;
+  references?: [];
 }
 
 export function AddedIntegrationOverviewPage(props: AddedIntegrationOverviewPageProps) {

public/components/integrations/components/added_integration_table.tsx

@@ -93,7 +93,9 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiText data-test-subj={`${record.templateName}IntegrationDescription`}>- -</EuiText>
+        <EuiText data-test-subj={`${record.templateName}IntegrationDescription`}>
+          {truncate(record.dataSourceMDSLabel || 'Local cluster', { length: 100 })}
+        </EuiText>
       ),
     });
   }
@@ -132,8 +134,17 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
     );
     setIsModalVisible(true);
   };
-
   const integTemplateNames = [...new Set(props.data.hits.map((i) => i.templateName))].sort();
+  let mdsLabels;
+  if (dataSourceEnabled) {
+    mdsLabels = [
+      ...new Set(
+        props.data.hits.flatMap((hit) =>
+          hit.references?.length > 0 ? hit.references.map((ref) => ref.name || 'Local cluster') : []
+        )
+      ),
+    ].sort();
+  }
 
   const search = {
     box: {
@@ -151,6 +162,21 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
           view: name,
         })),
       },
+      ...(dataSourceEnabled
+        ? [
+            {
+              type: 'field_value_selection' as const,
+              field: 'dataSourceMDSLabel',
+              name: 'Data Source Name',
+              multiSelect: false,
+              options: mdsLabels?.map((name) => ({
+                name,
+                value: name,
+                view: name,
+              })),
+            },
+          ]
+        : []),
     ],
   };
 
@@ -159,7 +185,17 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
     const templateName = integration.templateName;
     const creationDate = integration.creationDate;
     const name = integration.name;
-    return { id, templateName, creationDate, name, data: { templateName, name } };
+    const dataSourceMDSLabel = integration.references
+      ? integration.references[0].name
+      : 'Local cluster';
+    return {
+      id,
+      templateName,
+      creationDate,
+      name,
+      data: { templateName, name },
+      dataSourceMDSLabel,
+    };
   });
 
   return (