Support for MDS in integrations

Signed-off-by: sumukhswamy <[email protected]>
sumukhswamy · Aug 1, 2024 · 167a18f · 167a18f
1 parent 5da577f
commit 167a18f
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 19 deletions.
diff --git a/public/components/integrations/components/added_integration_overview_page.tsx b/public/components/integrations/components/added_integration_overview_page.tsx
@@ -33,6 +33,9 @@ export interface AddedIntegrationType {
   assets: any[];
   addedBy: string;
   id: string;
+  dataSourceMDSId?: string;
+  dataSourceMDSLabel?: string;
+  references: [];
 }
 
 export function AddedIntegrationOverviewPage(props: AddedIntegrationOverviewPageProps) {

diff --git a/public/components/integrations/components/added_integration_table.tsx b/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>
       ),
     });
   }
@@ -155,11 +157,22 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
   };
 
   const entries = props.data.hits.map((integration) => {
+    console.log(integration);
     const id = integration.id;
     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].dataSourceMDSLabel
+      : 'Local cluster';
+    return {
+      id,
+      templateName,
+      creationDate,
+      name,
+      data: { templateName, name },
+      dataSourceMDSLabel,
+    };
   });
 
   return (

diff --git a/public/components/integrations/components/create_integration_helpers.ts b/public/components/integrations/components/create_integration_helpers.ts
@@ -2,10 +2,10 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Color, VALID_INDEX_NAME } from '../../../../common/constants/integrations';
 import { HttpSetup } from '../../../../../../src/core/public';
-import { coreRefs } from '../../../framework/core_refs';
+import { Color, VALID_INDEX_NAME } from '../../../../common/constants/integrations';
 import { CONSOLE_PROXY, INTEGRATIONS_BASE } from '../../../../common/constants/shared';
+import { coreRefs } from '../../../framework/core_refs';
 
 type ValidationResult = { ok: true } | { ok: false; errors: string[] };
 
@@ -18,6 +18,8 @@ interface AddIntegrationRequestParams {
   templateName: string;
   integration: IntegrationConfig;
   setToast: (title: string, color?: Color, text?: string | undefined) => void;
+  dataSourceMDSId: string | undefined;
+  dataSourceMDSLabel: string | undefined;
   name?: string;
   indexPattern?: string;
   workflows?: string[];
@@ -299,6 +301,8 @@ export async function addIntegrationRequest({
   workflows,
   skipRedirect,
   dataSourceInfo,
+  dataSourceMDSId,
+  dataSourceMDSLabel,
 }: AddIntegrationRequestParams): Promise<boolean> {
   const http = coreRefs.http!;
   if (addSample) {
@@ -313,12 +317,16 @@ export async function addIntegrationRequest({
   }
 
   const createReqBody: {
+    dataSourceMDSId: string | undefined;
+    dataSourceMDSLabel: string | undefined;
     name?: string;
     indexPattern?: string;
     workflows?: string[];
     dataSource?: string;
     tableName?: string;
   } = {
+    dataSourceMDSId,
+    dataSourceMDSLabel,
     name,
     indexPattern,
     workflows,

diff --git a/public/components/integrations/components/integration.tsx b/public/components/integrations/components/integration.tsx
@@ -5,7 +5,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
+  EuiButton,
   EuiLoadingSpinner,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiPage,
   EuiPageBody,
@@ -14,16 +20,16 @@ import {
   EuiTabs,
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
-import { IntegrationOverview } from './integration_overview_panel';
-import { IntegrationDetails } from './integration_details_panel';
-import { IntegrationFields } from './integration_fields_panel';
-import { IntegrationAssets } from './integration_assets_panel';
-import { AvailableIntegrationProps } from './integration_types';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
-import { IntegrationScreenshots } from './integration_screenshots_panel';
 import { useToast } from '../../../../public/components/common/toast';
 import { coreRefs } from '../../../framework/core_refs';
 import { addIntegrationRequest } from './create_integration_helpers';
+import { IntegrationAssets } from './integration_assets_panel';
+import { IntegrationDetails } from './integration_details_panel';
+import { IntegrationFields } from './integration_fields_panel';
+import { IntegrationOverview } from './integration_overview_panel';
+import { IntegrationScreenshots } from './integration_screenshots_panel';
+import { AvailableIntegrationProps } from './integration_types';
 
 export function Integration(props: AvailableIntegrationProps) {
   const http = coreRefs.http!;
@@ -35,6 +41,9 @@ export function Integration(props: AvailableIntegrationProps) {
   const [integrationMapping, setMapping] = useState(null);
   const [integrationAssets, setAssets] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const closeModal = () => setIsModalVisible(false);
+  const showModal = () => setIsModalVisible(true);
 
   useEffect(() => {
     chrome.setBreadcrumbs([
@@ -131,6 +140,31 @@ export function Integration(props: AvailableIntegrationProps) {
     ));
   };
 
+  const mdsSelectorModal = () => {
+    if (isModalVisible) {
+      return (
+        <EuiModal onClose={closeModal}>
+          <EuiModalHeader>
+            <EuiModalHeaderTitle>
+              <h1>Modal title</h1>
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+
+          <EuiModalBody>
+            This modal has the following setup:
+            <EuiSpacer />
+          </EuiModalBody>
+
+          <EuiModalFooter>
+            <EuiButton onClick={closeModal} fill>
+              Close
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      );
+    }
+  };
+
   if (Object.keys(integration).length === 0) {
     return (
       <EuiOverlayMask>
@@ -142,6 +176,10 @@ export function Integration(props: AvailableIntegrationProps) {
     <EuiPage>
       <EuiPageBody>
         <EuiSpacer size="xl" />
+        <div>
+          <EuiButton onClick={() => showModal()}>Show Modal</EuiButton>
+          {mdsSelectorModal()}
+        </div>
         <IntegrationOverview
           integration={integration}
           showFlyout={() => {

diff --git a/public/components/integrations/components/setup_integration.tsx b/public/components/integrations/components/setup_integration.tsx
@@ -50,6 +50,10 @@ export interface IntegrationConfigProps {
   dataSourceEnabled: boolean;
   dataSourceManagement: DataSourceManagementPluginSetup;
   savedObjectsMDSClient: SavedObjectsStart;
+  handleSelectedDataSourceChange: (
+    dataSourceMDSId: string | undefined,
+    dataSourceMDSLabel: string | undefined
+  ) => void;
 }
 
 type SetupCallout = { show: true; title: string; color?: Color; text?: string } | { show: false };
@@ -138,12 +142,16 @@ const addIntegration = async ({
   integration,
   setLoading,
   setCalloutLikeToast,
+  dataSourceMDSId,
+  dataSourceMDSLabel,
   setIsInstalling,
 }: {
   config: IntegrationSetupInputs;
   integration: IntegrationConfig;
   setLoading: (loading: boolean) => void;
   setCalloutLikeToast: (title: string, color?: Color, text?: string) => void;
+  dataSourceMDSId: string | undefined;
+  dataSourceMDSLabel: string | undefined;
   setIsInstalling?: (isInstalling: boolean, success?: boolean) => void;
 }) => {
   setLoading(true);
@@ -163,6 +171,8 @@ const addIntegration = async ({
       templateName: integration.name,
       integration,
       setToast: setCalloutLikeToast,
+      dataSourceMDSId,
+      dataSourceMDSLabel,
       name: config.displayName,
       indexPattern: config.connectionDataSource,
       skipRedirect: setIsInstalling ? true : false,
@@ -180,7 +190,6 @@ const addIntegration = async ({
     const assets: { data: ParsedIntegrationAsset[] } = await http.get(
       `${INTEGRATIONS_BASE}/repository/${integration.name}/assets`
     );
-
     for (const query of assets.data.filter(
       (a: ParsedIntegrationAsset): a is ParsedIntegrationAsset & { type: 'query' } =>
         a.type === 'query'
@@ -205,6 +214,8 @@ const addIntegration = async ({
       templateName: integration.name,
       integration,
       setToast: setCalloutLikeToast,
+      dataSourceMDSId,
+      dataSourceMDSLabel,
       name: config.displayName,
       indexPattern: `flint_${config.connectionDataSource}_${
         config.connectionDatabaseName ?? 'default'
@@ -245,6 +256,8 @@ export function SetupBottomBar({
   loading,
   setLoading,
   setSetupCallout,
+  dataSourceMDSId,
+  dataSourceMDSLabel,
   unsetIntegration,
   setIsInstalling,
 }: {
@@ -253,6 +266,8 @@ export function SetupBottomBar({
   loading: boolean;
   setLoading: (loading: boolean) => void;
   setSetupCallout: (setupCallout: SetupCallout) => void;
+  dataSourceMDSId: string | undefined;
+  dataSourceMDSLabel: string | undefined;
   unsetIntegration?: () => void;
   setIsInstalling?: (isInstalling: boolean, success?: boolean) => void;
 }) {
@@ -306,6 +321,8 @@ export function SetupBottomBar({
                   setIsInstalling(newLoading);
                 },
                 setCalloutLikeToast,
+                dataSourceMDSId,
+                dataSourceMDSLabel,
                 setIsInstalling,
               });
             } else {
@@ -314,6 +331,8 @@ export function SetupBottomBar({
                 config,
                 setLoading,
                 setCalloutLikeToast,
+                dataSourceMDSId,
+                dataSourceMDSLabel,
                 setIsInstalling,
               });
             }
@@ -384,6 +403,8 @@ export function SetupIntegrationForm({
 
   const [setupCallout, setSetupCallout] = useState({ show: false } as SetupCallout);
   const [showLoading, setShowLoading] = useState(false);
+  const [dataSourceMDSId, setDataSourceMDSId] = useState<string | undefined>('');
+  const [dataSourceMDSLabel, setDataSourceMDSLabel] = useState<string | undefined>('');
 
   useEffect(() => {
     const getTemplate = async () => {
@@ -397,6 +418,11 @@ export function SetupIntegrationForm({
   const updateConfig = (updates: Partial<IntegrationSetupInputs>) =>
     setConfig(Object.assign({}, integConfig, updates));
 
+  const handleSelectedDataSourceChange = (id: string | undefined, label: string | undefined) => {
+    setDataSourceMDSId(id);
+    setDataSourceMDSLabel(label);
+  };
+
   const IntegrationInputFormComponent =
     forceConnection?.type === 'securityLake' || integConfig.connectionType === 'securityLake'
       ? SetupIntegrationInputsForSecurityLake
@@ -416,6 +442,7 @@ export function SetupIntegrationForm({
           notifications={notifications}
           dataSourceEnabled={dataSourceEnabled}
           savedObjectsMDSClient={savedObjectsMDSClient}
+          handleSelectedDataSourceChange={handleSelectedDataSourceChange}
         />
       )}
     </>
@@ -428,6 +455,8 @@ export function SetupIntegrationForm({
       loading={showLoading}
       setLoading={setShowLoading}
       setSetupCallout={setSetupCallout}
+      dataSourceMDSId={dataSourceMDSId}
+      dataSourceMDSLabel={dataSourceMDSLabel}
       unsetIntegration={unsetIntegration}
       setIsInstalling={setIsInstalling}
     />