Revert "Remove loading progress for integration setup (opensearch-pro…

…ject#1156) (opensearch-project#1162)" This reverts commit a08721b. Signed-off-by: Eric <menwe@amazon.com>
mengweieric · Nov 8, 2023 · bec0b26 · bec0b26
1 parent ebcd7c0
commit bec0b26
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 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
@@ -692,7 +692,9 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
               }
             }
             loading={false}
+            loadingProgress={0}
             setLoading={[Function]}
+            setProgress={[Function]}
             setSetupCallout={[Function]}
           >
             <EuiBottomBar>

diff --git a/public/components/integrations/components/setup_integration.tsx b/public/components/integrations/components/setup_integration.tsx
@@ -9,17 +9,17 @@ import {
   EuiButtonEmpty,
   EuiCallOut,
   EuiComboBox,
-  EuiEmptyPrompt,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
-  EuiLoadingLogo,
+  EuiLoadingDashboards,
   EuiPage,
   EuiPageBody,
   EuiPageContent,
   EuiPageContentBody,
+  EuiProgress,
   EuiSelect,
   EuiSpacer,
   EuiText,
@@ -274,12 +274,16 @@ export function SetupBottomBar({
   integration,
   loading,
   setLoading,
+  loadingProgress,
+  setProgress,
   setSetupCallout,
 }: {
   config: IntegrationSetupInputs;
   integration: IntegrationTemplate;
   loading: boolean;
   setLoading: (loading: boolean) => void;
+  loadingProgress: number;
+  setProgress: (updater: number | ((progress: number) => number)) => void;
   setSetupCallout: (setupCallout: SetupCallout) => void;
 }) {
   // Drop-in replacement for setToast
@@ -329,12 +333,14 @@ export function SetupBottomBar({
                   config.displayName,
                   config.connectionDataSource
                 );
+                setProgress((progress) => progress + 1);
               } else if (config.connectionType === 's3') {
                 const http = coreRefs.http!;
 
                 const assets = await http.get(
                   `${INTEGRATIONS_BASE}/repository/${integration.name}/assets`
                 );
+                setProgress((progress) => progress + 1);
 
                 // Queries must exist because we disable s3 if they're not present
                 for (const query of assets.data.queries!) {
@@ -344,7 +350,10 @@ export function SetupBottomBar({
                   );
                   queryStr = queryStr.replaceAll('{s3_bucket_location}', config.connectionLocation);
                   queryStr = queryStr.replaceAll('{object_name}', integration.name);
-                  const result = await runQuery(queryStr, (_) => {});
+                  const currProgress = loadingProgress; // Need a frozen copy for getting accurate query steps
+                  const result = await runQuery(queryStr, (step) =>
+                    setProgress(currProgress + step)
+                  );
                   if (!result.ok) {
                     setLoading(false);
                     setCalloutLikeToast(
@@ -366,6 +375,7 @@ export function SetupBottomBar({
                   config.displayName,
                   config.connectionDataSource
                 );
+                setProgress((progress) => progress + 1);
               } else {
                 console.error('Invalid data source type');
               }
@@ -380,14 +390,27 @@ export function SetupBottomBar({
   );
 }
 
-export function LoadingPage() {
+export function LoadingPage({ value, max }: { value: number; max: number }) {
   return (
     <>
-      <EuiEmptyPrompt
-        icon={<EuiLoadingLogo logo="logoOpenSearch" size="xl" />}
-        title={<h2>Setting Up the Integration</h2>}
-        body={<p>This can take several minutes.</p>}
-      />
+      <EuiSpacer size="xxl" />
+      <EuiFlexGroup direction="column" justifyContent="center" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiLoadingDashboards size="xxl" />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiTitle>
+            <h3>Adding Integration</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiText>
+            This may take a few minutes. The integration and assets are being added.
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiProgress value={value} max={max} size="m" />
     </>
   );
 }
@@ -409,6 +432,7 @@ export function SetupIntegrationPage({ integration }: { integration: string }) {
   const [setupCallout, setSetupCallout] = useState({ show: false } as SetupCallout);
 
   const [showLoading, setShowLoading] = useState(false);
+  const [loadingProgress, setLoadingProgress] = useState(0);
 
   useEffect(() => {
     const getTemplate = async () => {
@@ -421,14 +445,15 @@ export function SetupIntegrationPage({ integration }: { integration: string }) {
 
   const updateConfig = (updates: Partial<IntegrationSetupInputs>) =>
     setConfig(Object.assign({}, integConfig, updates));
+  const maxProgress = 2 + 3 * (template.assets?.queries?.length ?? 0);
 
   return (
     <EuiPage>
       <EuiPageBody>
         <EuiPageContent>
           <EuiPageContentBody>
             {showLoading ? (
-              <LoadingPage />
+              <LoadingPage value={loadingProgress} max={maxProgress} />
             ) : (
               <SetupIntegrationForm
                 config={integConfig}
@@ -444,6 +469,8 @@ export function SetupIntegrationPage({ integration }: { integration: string }) {
           integration={template}
           loading={showLoading}
           setLoading={setShowLoading}
+          loadingProgress={loadingProgress}
+          setProgress={setLoadingProgress}
           setSetupCallout={setSetupCallout}
         />
       </EuiPageBody>