Integrations base path fix (#713)

* Fix behavior when base path is added Signed-off-by: Simeon Widdis <sawiddis@amazon.com> * Fix handling of base paths for the proxy Signed-off-by: Simeon Widdis <sawiddis@amazon.com> * Fix add integration flyout Signed-off-by: Simeon Widdis <sawiddis@amazon.com> * Remove fetch usages from proxy call Signed-off-by: Simeon Widdis <sawiddis@amazon.com> * Fix request query building Signed-off-by: Simeon Widdis <sawiddis@amazon.com> * Switch from props.http to coreRefs.http Signed-off-by: Simeon Widdis <sawiddis@amazon.com> * Revert "Switch from props.http to coreRefs.http" This reverts commit f66db83. Signed-off-by: Simeon Widdis <sawiddis@amazon.com> --------- Signed-off-by: Simeon Widdis <sawiddis@amazon.com>
opensearch-project · Aug 3, 2023 · 3e1eb69 · 3e1eb69
1 parent 0e9e8cd
commit 3e1eb69
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 50 deletions.
diff --git a/public/components/integrations/components/add_integration_flyout.tsx b/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 });

diff --git a/public/components/integrations/components/available_integration_card_view.tsx b/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}

diff --git a/public/components/integrations/components/available_integration_overview_page.tsx b/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,

diff --git a/public/components/integrations/components/integration.tsx b/public/components/integrations/components/integration.tsx
@@ -48,36 +48,28 @@ export function Integration(props: AvailableIntegrationProps) {
   ): 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'],
-          ],
+      return http
+        .post('/api/console/proxy', {
           body: JSON.stringify(payload),
-        }
-      )
-        .then((response) => response.json())
+          query: {
+            path: `_component_template/ss4o_${componentName}_${version}_template`,
+            method: 'POST',
+          },
+        })
         .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`,
-        {
-          method: 'POST',
-          headers: [
-            ['osd-xsrf', 'true'],
-            ['Content-Type', 'application/json'],
-          ],
+      return http
+        .post('/api/console/proxy', {
           body: JSON.stringify(payload),
-        }
-      )
-        .then((response) => response.json())
+          query: {
+            path: `_index_template/${componentName}_${version}`,
+            method: 'POST',
+          },
+        })
         .catch((err: any) => {
           console.error(err);
           return err;
@@ -86,11 +78,7 @@ export function Integration(props: AvailableIntegrationProps) {
   };
 
   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(
@@ -147,8 +135,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 +153,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 +212,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');
@@ -298,7 +286,7 @@ export function Integration(props: AvailableIntegrationProps) {
         <EuiSpacer />
         {IntegrationDetails({ integration })}
         <EuiSpacer />
-        {IntegrationScreenshots({ integration })}
+        {IntegrationScreenshots({ integration, http })}
         <EuiSpacer />
         <EuiTabs display="condensed">{renderTabs()}</EuiTabs>
         <EuiSpacer size="s" />

diff --git a/public/components/integrations/components/integration_screenshots_panel.tsx b/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}