[Backport 2.x] Finish frontend S3 framework for integrations (#1086)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Oct 5, 2023 · 48bd609 · 48bd609
1 parent b1331ed
commit 48bd609
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/...omponents/integrations/components/__tests__/__snapshots__/setup_integration.test.tsx.snap b/...omponents/integrations/components/__tests__/__snapshots__/setup_integration.test.tsx.snap
@@ -30,6 +30,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                       config={
                         Object {
                           "connectionDataSource": "",
+                          "connectionLocation": "",
                           "connectionType": "index",
                           "displayName": "sample Integration",
                         }
@@ -109,6 +110,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                   onBlur={[Function]}
                                   onChange={[Function]}
                                   onFocus={[Function]}
+                                  placeholder="sample Integration"
                                   value="sample Integration"
                                 >
                                   <EuiFormControlLayout
@@ -128,6 +130,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                             onBlur={[Function]}
                                             onChange={[Function]}
                                             onFocus={[Function]}
+                                            placeholder="sample Integration"
                                             type="text"
                                             value="sample Integration"
                                           />
@@ -690,6 +693,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
             config={
               Object {
                 "connectionDataSource": "",
+                "connectionLocation": "",
                 "connectionType": "index",
                 "displayName": "sample Integration",
               }
@@ -1115,6 +1119,7 @@ exports[`Integration Setup Page Renders the form as expected 1`] = `
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
+              placeholder="sample Integration"
               value="Test Instance Name"
             >
               <EuiFormControlLayout
@@ -1134,6 +1139,7 @@ exports[`Integration Setup Page Renders the form as expected 1`] = `
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
+                        placeholder="sample Integration"
                         type="text"
                         value="Test Instance Name"
                       />

diff --git a/public/components/integrations/components/setup_integration.tsx b/public/components/integrations/components/setup_integration.tsx
@@ -35,6 +35,7 @@ export interface IntegrationSetupInputs {
   displayName: string;
   connectionType: string;
   connectionDataSource: string;
+  connectionLocation: string;
 }
 
 interface IntegrationConfigProps {
@@ -201,6 +202,7 @@ export function SetupIntegrationForm({
         <EuiFieldText
           value={config.displayName}
           onChange={(event) => updateConfig({ displayName: event.target.value })}
+          placeholder={`${integration.name} Integration`}
         />
       </EuiFormRow>
       <EuiSpacer />
@@ -244,6 +246,15 @@ export function SetupIntegrationForm({
           singleSelection={{ asPlainText: true }}
         />
       </EuiFormRow>
+      {config.connectionType === 's3' ? (
+        <EuiFormRow label="S3 Bucket Location">
+          <EuiFieldText
+            value={config.connectionLocation}
+            onChange={(event) => updateConfig({ connectionLocation: event.target.value })}
+            placeholder="s3://"
+          />
+        </EuiFormRow>
+      ) : null}
     </EuiForm>
   );
 }
@@ -261,7 +272,7 @@ export function SetupBottomBar({
   loading: boolean;
   setLoading: (loading: boolean) => void;
   loadingProgress: number;
-  setProgress: (updater: number | ((progress: number) => void)) => void;
+  setProgress: (updater: number | ((progress: number) => number)) => void;
 }) {
   const { setToast } = useToast();
 
@@ -313,7 +324,12 @@ export function SetupBottomBar({
 
                 // Queries must exist because we disable s3 if they're not present
                 for (const query of assets.data.queries!) {
-                  const queryStr = query.query.replace('${TABLE}', config.connectionDataSource);
+                  let queryStr = (query.query as string).replaceAll(
+                    '{table_name}',
+                    `${config.connectionDataSource}.default.${integration.name}`
+                  );
+                  queryStr = queryStr.replaceAll('{s3_bucket_location}', config.connectionLocation);
+                  queryStr = queryStr.replaceAll('{object_name}', integration.name);
                   const currProgress = loadingProgress; // Need a frozen copy for getting accurate query steps
                   const result = await runQuery(queryStr, (step) =>
                     setProgress(currProgress + step)
@@ -381,6 +397,7 @@ export function SetupIntegrationPage({ integration }: { integration: string }) {
     displayName: `${integration} Integration`,
     connectionType: 'index',
     connectionDataSource: '',
+    connectionLocation: '',
   } as IntegrationSetupInputs);
 
   const [template, setTemplate] = useState({