Adding loader when downloading a bundle

replicatedhq · Jul 17, 2020 · 78fd43d · 78fd43d
1 parent 435a342
commit 78fd43d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/kotsadm/web/src/components/troubleshoot/SupportBundleAnalysis.jsx b/kotsadm/web/src/components/troubleshoot/SupportBundleAnalysis.jsx
@@ -16,12 +16,14 @@ export class SupportBundleAnalysis extends React.Component {
   constructor(props) {
     super();
     this.state = {
-      activeTab: props.location.pathname.indexOf("/contents") !== -1 ? "fileTree" : location.pathname.indexOf("/redactor") !== -1  ? "redactorReport" : "bundleAnalysis",
-      filterTiles: "0"
+      activeTab: props.location.pathname.indexOf("/contents") !== -1 ? "fileTree" : location.pathname.indexOf("/redactor") !== -1 ? "redactorReport" : "bundleAnalysis",
+      filterTiles: "0",
+      downloadingBundle: false
     };
   }
 
   downloadBundle = async (bundle) => {
+    this.setState({ downloadingBundle: true });
     fetch(`${window.env.API_ENDPOINT}/troubleshoot/supportbundle/${bundle.id}/download`, {
       method: "GET",
       headers: {
@@ -31,11 +33,13 @@ export class SupportBundleAnalysis extends React.Component {
       .then(async (result) => {
         if (result.ok) {
           const blob = await result.blob();
-          download(blob, "supportbundle.tar.gz", "application/gzip")
+          download(blob, "supportbundle.tar.gz", "application/gzip");
+          this.setState({ downloadingBundle: false });
         }
       })
       .catch(err => {
         console.log(err);
+        this.setState({ downloadingBundle: false });
       })
   }
 
@@ -49,15 +53,15 @@ export class SupportBundleAnalysis extends React.Component {
     const { location } = this.props;
     if (location !== lastProps.location) {
       this.setState({
-        activeTab: location.pathname.indexOf("/contents") !== -1 ? "fileTree" : location.pathname.indexOf("/redactor") !== -1  ? "redactorReport" : "bundleAnalysis"
+        activeTab: location.pathname.indexOf("/contents") !== -1 ? "fileTree" : location.pathname.indexOf("/redactor") !== -1 ? "redactorReport" : "bundleAnalysis"
       });
     }
   }
 
   render() {
     const { watch, getSupportBundle } = this.props;
     const bundle = getSupportBundle?.getSupportBundle;
-    
+
     if (getSupportBundle.loading) {
       return (
         <div className="flex-column flex1 justifyContent--center alignItems--center">
@@ -93,7 +97,10 @@ export class SupportBundleAnalysis extends React.Component {
                     </div>
                   </div>
                   <div className="flex flex-auto alignItems--center justifyContent--flexEnd">
-                    <button className="btn primary lightBlue" onClick={() => this.downloadBundle(bundle)}> Download bundle </button>
+                    {this.state.downloadingBundle ? 
+                      <Loader size="30" /> :
+                      <button className="btn primary lightBlue" onClick={() => this.downloadBundle(bundle)}> Download bundle </button>
+                    }
                   </div>
                 </div>
               </div>

diff --git a/kotsadm/web/src/components/troubleshoot/SupportBundleRow.jsx b/kotsadm/web/src/components/troubleshoot/SupportBundleRow.jsx
@@ -11,6 +11,9 @@ import download from "downloadjs";
 // import { VendorUtilities } from "../../utilities/VendorUtilities";
 
 class SupportBundleRow extends React.Component {
+  state = {
+    downloadingBundle: false
+  }
 
   renderSharedContext = () => {
     const { bundle } = this.props;
@@ -35,21 +38,24 @@ class SupportBundleRow extends React.Component {
   }
 
   downloadBundle = async (bundle) => {
+    this.setState({ downloadingBundle: true });
     fetch(`${window.env.API_ENDPOINT}/troubleshoot/supportbundle/${bundle.id}/download`, {
       method: "GET",
       headers: {
         "Authorization": Utilities.getToken(),
       }
     })
-    .then(async (result) => {
-      if (result.ok) {
-        const blob = await result.blob();
-        download(blob, "supportbundle.tar.gz", "application/gzip");
-      }
-    })
-    .catch(err => {
-      console.log(err);
-    })
+      .then(async (result) => {
+        if (result.ok) {
+          const blob = await result.blob();
+          download(blob, "supportbundle.tar.gz", "application/gzip");
+          this.setState({ downloadingBundle: false });
+        }
+      })
+      .catch(err => {
+        this.setState({ downloadingBundle: false });
+        console.log(err);
+      })
   }
 
   renderInsightIcon = (bundle, i, insight) => {
@@ -129,7 +135,11 @@ class SupportBundleRow extends React.Component {
                 </div>
               </div>
               <div className="flex flex-auto alignItems--center justifyContent--flexEnd">
-                <span className="u-fontSize--small u-color--astral u-fontWeight--medium u-textDecoration--underlineOnHover u-marginRight--normal" onClick={() => this.downloadBundle(bundle)}>Download bundle</span>
+                {this.state.downloadingBundle ?
+                  <Loader size="30" />
+                  :
+                  <span className="u-fontSize--small u-color--astral u-fontWeight--medium u-textDecoration--underlineOnHover u-marginRight--normal" onClick={() => this.downloadBundle(bundle)}>Download bundle</span>
+                }
               </div>
             </div>
           </div>