Merge branch 'main' into aws_waf

public/components/integrations/components/add_integration_flyout.tsx

@@ -91,7 +91,7 @@ export const doPropertyValidation = (
 };
 
 export function AddIntegrationFlyout(props: IntegrationFlyoutProps) {
-  const { onClose, onCreate, integrationName, integrationType } = props;
+  const { onClose, onCreate, integrationName, integrationType, http } = props;
 
   const [isDataSourceValid, setDataSourceValid] = useState<null | false | true>(null);
 
@@ -131,11 +131,13 @@ export function AddIntegrationFlyout(props: IntegrationFlyoutProps) {
   const fetchDataSourceMappings = async (
     targetDataSource: string
   ): Promise<{ [key: string]: { properties: any } } | null> => {
-    return fetch(`/api/console/proxy?path=${targetDataSource}/_mapping&method=GET`, {
-      method: 'POST',
-      headers: [['osd-xsrf', 'true']],
-    })
-      .then((response) => response.json())
+    return http
+      .post('/api/console/proxy', {
+        query: {
+          path: `${targetDataSource}/_mapping`,
+          method: 'GET',
+        },
+      })
       .then((response) => {
         // Un-nest properties by a level for caller convenience
         Object.keys(response).forEach((key) => {
@@ -152,8 +154,8 @@ export function AddIntegrationFlyout(props: IntegrationFlyoutProps) {
   const fetchIntegrationMappings = async (
     targetName: string
   ): Promise<{ [key: string]: { template: { mappings: { properties?: any } } } } | null> => {
-    return fetch(`/api/integrations/repository/${targetName}/schema`)
-      .then((response) => response.json())
+    return http
+      .get(`/api/integrations/repository/${targetName}/schema`)
       .then((response) => {
         if (response.statusCode && response.statusCode !== 200) {
           throw new Error('Failed to retrieve Integration schema', { cause: response });

public/components/integrations/components/added_integration_overview_page.tsx

@@ -16,6 +16,7 @@ import { HttpStart } from '../../../../../../src/core/public';
 export interface AddedIntegrationsTableProps {
   loading: boolean;
   data: AddedIntegrationsList;
+  setData: React.Dispatch<React.SetStateAction<AddedIntegrationsList>>;
   http: HttpStart;
 }
 
@@ -57,7 +58,7 @@ export function AddedIntegrationOverviewPage(props: AddedIntegrationOverviewPage
     <EuiPage>
       <EuiPageBody component="div">
         {IntegrationHeader()}
-        {AddedIntegrationsTable({ data, loading: false, http })}
+        {AddedIntegrationsTable({ data, setData, loading: false, http })}
       </EuiPageBody>
     </EuiPage>
   );

public/components/integrations/components/added_integration_table.tsx

@@ -23,8 +23,6 @@ import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { useToast } from '../../../../public/components/common/toast';
 
 export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
-  const integrations = props.data.hits;
-
   const { http } = props;
 
   const { setToast } = useToast();
@@ -90,6 +88,9 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
       .delete(`${INTEGRATIONS_BASE}/store/${integrationInstance}`)
       .then(() => {
         setToast(`${name} integration successfully deleted!`, 'success');
+        props.setData({
+          hits: props.data.hits.filter((i) => i.id !== integrationInstance),
+        });
       })
       .catch((err) => {
         setToast(`Error deleting ${name} or its assets`, 'danger');
@@ -116,7 +117,7 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
     setIsModalVisible(true);
   };
 
-  const integTemplateNames = [...new Set(integrations.map((i) => i.templateName))].sort();
+  const integTemplateNames = [...new Set(props.data.hits.map((i) => i.templateName))].sort();
 
   const search = {
     box: {
@@ -137,7 +138,7 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
     ],
   };
 
-  const entries = integrations.map((integration) => {
+  const entries = props.data.hits.map((integration) => {
     const id = integration.id;
     const templateName = integration.templateName;
     const creationDate = integration.creationDate;

public/components/integrations/components/available_integration_card_view.tsx

@@ -28,6 +28,7 @@ import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { badges } from './integration_category_badge_group';
 
 export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardViewProps) {
+  const http = props.http;
   const [toggleIconIdSelected, setToggleIconIdSelected] = useState('1');
 
   const getImage = (url?: string) => {
@@ -72,7 +73,9 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
               <EuiFlexItem key={v} style={{ minWidth: '14rem', maxWidth: '14rem' }}>
                 <EuiCard
                   icon={getImage(
-                    `${INTEGRATIONS_BASE}/repository/${i.name}/static/${i.statics.logo.path}`
+                    http.basePath.prepend(
+                      `${INTEGRATIONS_BASE}/repository/${i.name}/static/${i.statics.logo.path}`
+                    )
                   )}
                   title={i.displayName ? i.displayName : i.name}
                   description={i.description}

public/components/integrations/components/available_integration_overview_page.tsx

@@ -22,6 +22,7 @@ import { AvailableIntegrationsCardView } from './available_integration_card_view
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { AvailableIntegrationOverviewPageProps } from './integration_types';
 import { useToast } from '../../../../public/components/common/toast';
+import { HttpStart } from '../../../../../../src/core/public';
 
 export interface AvailableIntegrationType {
   name: string;
@@ -54,6 +55,7 @@ export interface AvailableIntegrationsCardViewProps {
   query: string;
   setQuery: (input: string) => void;
   renderCateogryFilters: () => React.JSX.Element;
+  http: HttpStart;
 }
 
 export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOverviewPageProps) {
@@ -190,6 +192,7 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
               query,
               setQuery,
               renderCateogryFilters,
+              http,
             })
           : AvailableIntegrationsTable({
               loading: false,

public/components/integrations/components/integration.tsx

@@ -31,13 +31,36 @@ export function Integration(props: AvailableIntegrationProps) {
 
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const { setToast } = useToast();
-  const [integration, setIntegration] = useState({});
+  const [integration, setIntegration] = useState({} as { name: string; type: string });
 
   const [integrationMapping, setMapping] = useState(null);
   const [integrationAssets, setAssets] = useState([]);
   const [loading, setLoading] = useState(false);
 
-  const createMappings = async (
+  const createComponentMapping = async (
+    componentName: string,
+    payload: {
+      template: { mappings: { _meta: { version: string } } };
+      composed_of: string[];
+      index_patterns: string[];
+    }
+  ): Promise<{ [key: string]: { properties: any } } | null> => {
+    const version = payload.template.mappings._meta.version;
+    return http
+      .post('/api/console/proxy', {
+        body: JSON.stringify(payload),
+        query: {
+          path: `_component_template/ss4o_${componentName}-${version}-template`,
+          method: 'POST',
+        },
+      })
+      .catch((err: any) => {
+        console.error(err);
+        return err;
+      });
+  };
+
+  const createIndexMapping = async (
     componentName: string,
     payload: {
       template: { mappings: { _meta: { version: string } } };
@@ -47,68 +70,46 @@ export function Integration(props: AvailableIntegrationProps) {
     dataSourceName: string
   ): Promise<{ [key: string]: { properties: any } } | null> => {
     const version = payload.template.mappings._meta.version;
-    if (componentName !== integration.type) {
-      return fetch(
-        `/api/console/proxy?path=_component_template/ss4o_${componentName}_${version}_template&method=POST`,
-        {
-          method: 'POST',
-          headers: [
-            ['osd-xsrf', 'true'],
-            ['Content-Type', 'application/json'],
-          ],
-          body: JSON.stringify(payload),
-        }
-      )
-        .then((response) => response.json())
-        .catch((err: any) => {
-          console.error(err);
-          return err;
-        });
-    } else {
-      payload.index_patterns = [dataSourceName];
-      return fetch(
-        `/api/console/proxy?path=_index_template/${componentName}_${version}&method=POST`,
-        {
+    payload.index_patterns = [dataSourceName];
+    return http
+      .post('/api/console/proxy', {
+        body: JSON.stringify(payload),
+        query: {
+          path: `_index_template/ss4o_${componentName}-${integration.name}-${version}-sample`,
           method: 'POST',
-          headers: [
-            ['osd-xsrf', 'true'],
-            ['Content-Type', 'application/json'],
-          ],
-          body: JSON.stringify(payload),
-        }
-      )
-        .then((response) => response.json())
-        .catch((err: any) => {
-          console.error(err);
-          return err;
-        });
-    }
+        },
+      })
+      .catch((err: any) => {
+        console.error(err);
+        return err;
+      });
   };
 
   const createDataSourceMappings = async (targetDataSource: string): Promise<any> => {
-    const data = await fetch(
-      `${INTEGRATIONS_BASE}/repository/${integrationTemplateId}/schema`
-    ).then((response) => {
-      return response.json();
-    });
+    const data = await http.get(`${INTEGRATIONS_BASE}/repository/${integrationTemplateId}/schema`);
     let error = null;
     const mappings = data.data.mappings;
     mappings[integration.type].composed_of = mappings[integration.type].composed_of.map(
-      (templateName: string) => {
-        const version = mappings[templateName].template.mappings._meta.version;
-        return `ss4o_${templateName}_${version}_template`;
+      (componentName: string) => {
+        const version = mappings[componentName].template.mappings._meta.version;
+        return `ss4o_${componentName}-${version}-template`;
       }
     );
+    // Create component mappings before the index mapping
+    // The assumption is that index mapping relies on component mappings for creation
     Object.entries(mappings).forEach(async ([key, mapping]) => {
       if (key === integration.type) {
         return;
       }
-      await createMappings(key, mapping as any, targetDataSource);
+      await createComponentMapping(key, mapping as any);
     });
-    await createMappings(integration.type, mappings[integration.type], targetDataSource);
+    await createIndexMapping(integration.type, mappings[integration.type], targetDataSource);
 
     for (const [key, mapping] of Object.entries(data.data.mappings)) {
-      const result = await createMappings(key, mapping as any, targetDataSource);
+      const result =
+        key === integration.type
+          ? await createIndexMapping(key, mapping as any, targetDataSource)
+          : await createComponentMapping(key, mapping as any);
 
       if (result && result.error) {
         error = (result.error as any).reason;
@@ -147,8 +148,8 @@ export function Integration(props: AvailableIntegrationProps) {
     if (Object.keys(integration).length === 0) {
       return;
     }
-    fetch(`${INTEGRATIONS_BASE}/repository/${integration.name}/schema`)
-      .then((response) => response.json())
+    http
+      .get(`${INTEGRATIONS_BASE}/repository/${integration.name}/schema`)
       .then((parsedResponse) => {
         if (parsedResponse.statusCode && parsedResponse.statusCode !== 200) {
           throw new Error('Request for schema failed: ' + parsedResponse.message);
@@ -165,8 +166,8 @@ export function Integration(props: AvailableIntegrationProps) {
     if (Object.keys(integration).length === 0) {
       return;
     }
-    fetch(`${INTEGRATIONS_BASE}/repository/${integration.name}/assets`)
-      .then((response) => response.json())
+    http
+      .get(`${INTEGRATIONS_BASE}/repository/${integration.name}/assets`)
       .then((parsedResponse) => {
         if (parsedResponse.statusCode && parsedResponse.statusCode !== 200) {
           throw new Error('Request for assets failed: ' + parsedResponse.message);
@@ -224,14 +225,14 @@ export function Integration(props: AvailableIntegrationProps) {
       data.sampleData
         .map((record) => `{"create": { "_index": "${dataSource}" } }\n${JSON.stringify(record)}`)
         .join('\n') + '\n';
-    fetch(`/api/console/proxy?path=${dataSource}/_bulk&method=POST`, {
-      method: 'POST',
-      body: requestBody,
-      headers: [
-        ['osd-xsrf', 'true'],
-        ['Content-Type', 'application/json; charset=utf-8'],
-      ],
-    })
+    http
+      .post('/api/console/proxy', {
+        body: requestBody,
+        query: {
+          path: `${dataSource}/_bulk`,
+          method: 'POST',
+        },
+      })
       .catch((err) => {
         console.error(err);
         setToast('Failed to load sample data', 'danger');
@@ -256,7 +257,7 @@ export function Integration(props: AvailableIntegrationProps) {
 
   const [selectedTabId, setSelectedTabId] = useState('assets');
 
-  const onSelectedTabChanged = (id) => {
+  const onSelectedTabChanged = (id: string) => {
     setSelectedTabId(id);
   };
 
@@ -298,7 +299,7 @@ export function Integration(props: AvailableIntegrationProps) {
         <EuiSpacer />
         {IntegrationDetails({ integration })}
         <EuiSpacer />
-        {IntegrationScreenshots({ integration })}
+        {IntegrationScreenshots({ integration, http })}
         <EuiSpacer />
         <EuiTabs display="condensed">{renderTabs()}</EuiTabs>
         <EuiSpacer size="s" />

public/components/integrations/components/integration_screenshots_panel.tsx

@@ -10,6 +10,7 @@ import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 
 export function IntegrationScreenshots(props: any) {
   const config = props.integration;
+  const http = props.http;
   let screenshots;
   if (config.statics.gallery) {
     screenshots = config.statics.gallery;
@@ -23,7 +24,9 @@ export function IntegrationScreenshots(props: any) {
           return (
             <EuiFlexItem key={screenshot.path} grow={false}>
               <EuiImage
-                src={`${INTEGRATIONS_BASE}/repository/${config.name}/static/${screenshot.path}`}
+                src={http.basePath.prepend(
+                  `${INTEGRATIONS_BASE}/repository/${config.name}/static/${screenshot.path}`
+                )}
                 alt={screenshot.annotation ? screenshot.annotation : ''}
                 allowFullScreen={true}
                 size={300}

server/adaptors/integrations/__data__/repository/apache/apache-1.0.0.json

@@ -29,7 +29,7 @@
             "version": "1.0.0"
         },
         {
-            "name": "logs",
+            "name": "logs-apache",
             "version": "1.0.0"
         }
     ],

server/adaptors/integrations/__data__/repository/apache/schemas/logs-1.0.0.mapping.json → server/adaptors/integrations/__data__/repository/apache/schemas/logs-apache-1.0.0.mapping.json

@@ -1,9 +1,12 @@
 {
     "index_patterns": [
-        "ss4o_logs-*-*"
+        "ss4o_logs-apache-*"
     ],
     "data_stream": {},
     "template": {
+        "aliases": {
+            "logs-apache": {}
+        },
         "mappings": {
             "_meta": {
                 "version": "1.0.0",

server/adaptors/integrations/__data__/repository/aws_elb/aws_elb-1.0.0.json

@@ -41,7 +41,7 @@
             "version": "1.0.0"
         },
         {
-            "name": "logs",
+            "name": "logs-elb",
             "version": "1.0.0"
         }
     ],

server/adaptors/integrations/__data__/repository/aws_elb/schemas/logs-1.0.0.mapping.json → server/adaptors/integrations/__data__/repository/aws_elb/schemas/logs-elb-1.0.0.mapping.json

@@ -1,9 +1,12 @@
 {
     "index_patterns": [
-      "ss4o_logs-*-*"
+      "ss4o_logs-elb-*"
     ],
     "data_stream": {},
     "template": {
+      "aliases": {
+        "logs-elb": {}
+      },
       "mappings": {
         "_meta": {
           "version": "1.0.0",