Error modal updates

replicatedhq · Aug 10, 2020 · 90426f1 · 90426f1
1 parent 8b10add
commit 90426f1
Show file tree

Hide file tree

Showing 11 changed files with 249 additions and 131 deletions.
diff --git a/kotsadm/web/src/Root.jsx b/kotsadm/web/src/Root.jsx
@@ -292,17 +292,9 @@ class Root extends Component {
                   listApps={listApps}
                   onLogoutError={this.onLogoutError}
                   isSnapshotsSupported={this.isSnapshotsSupported()}
+                  errLoggingOut={errLoggingOut}
                 />
                 <div className="flex1 flex-column u-overflow--auto">
-                  {errLoggingOut && errLoggingOut.length > 0 &&
-                    <div className="ErrorWrapper flex-auto flex alignItems--center">
-                      <div className="icon redWarningIcon u-marginRight--10" />
-                      <div>
-                        <p className="title">Failed to log out</p>
-                        <p className="err">{errLoggingOut}</p>
-                      </div>
-                    </div>
-                  }
                   <Switch>
 
                     <Route exact path="/" component={() => <Redirect to={Utilities.isLoggedIn() ? "/apps" : "/secure-console"} />} />

diff --git a/kotsadm/web/src/components/apps/AppDetailPage.jsx b/kotsadm/web/src/components/apps/AppDetailPage.jsx
@@ -32,6 +32,7 @@ import AppSnapshotSchedule from "./AppSnapshotSchedule";
 import AppSnapshotDetail from "./AppSnapshotDetail";
 import AppSnapshotRestore from "./AppSnapshotRestore";
 import TroubleshootContainer from "../troubleshoot/TroubleshootContainer";
+import ErrorModal from "../modals/ErrorModal";
 
 import "../../scss/components/watches/WatchDetailPage.scss";
 
@@ -50,7 +51,9 @@ class AppDetailPage extends Component {
       loadingApp: true,
       getAppJob: new Repeater(),
       gettingAppErrMsg: "",
-      makingCurrentReleaseErrMsg: ""
+      makingCurrentReleaseErrMsg: "",
+      makingCurrentRelease: false,
+      displayErrorModal: false
     }
   }
 
@@ -102,20 +105,28 @@ class AppDetailPage extends Component {
   }
 
   makeCurrentRelease = async (upstreamSlug, version) => {
-    this.setState({ makingCurrentReleaseErrMsg: "" });
     try {
-      await fetch(`${window.env.API_ENDPOINT}/app/${upstreamSlug}/sequence/${version.sequence}/deploy`, {
+      this.setState({ makingCurrentReleaseErrMsg: "" });
+
+      const res = await fetch(`${window.env.API_ENDPOINT}/app/${upstreamSlug}/sequence/${version.sequence}/deploy`, {
         headers: {
           "Authorization": Utilities.getToken(),
           "Content-Type": "application/json",
         },
         method: "POST",
       });
-      this.refetchData();
-    } catch(err) {
+      if (res.ok && res.status === 204) {
+        this.setState({ makingCurrentReleaseErrMsg: "" });
+        this.refetchData();
+      } else {
+        this.setState({
+          makingCurrentReleaseErrMsg: `Unable to deploy release ${version.title}, sequence ${version.sequence}: Unexpected status code: ${res.status}`,
+        });
+      }
+    } catch (err) {
       console.log(err)
       this.setState({
-        makingCurrentReleaseErrMsg: err ? `Unable to deploy release ${version.title}, sequence ${version.sequence}: ${err.message}` : "Something went wrong, please try again."
+        makingCurrentReleaseErrMsg: err ? `Unable to deploy release ${version.title}, sequence ${version.sequence}: ${err.message}` : "Something went wrong, please try again.",
       });
     }
   }
@@ -129,14 +140,14 @@ class AppDetailPage extends Component {
   }
 
   getApp = async (slug = this.props.match.params.slug) => {
-    if (!slug) {
+    if (!this.props.match.params.slug) {
       return;
     }
 
     try {
-      this.setState({ loadingApp: true, gettingAppErrMsg: "" });
+      this.setState({ loadingApp: true, gettingAppErrMsg: "", displayErrorModal: false });
 
-      const res = await fetch(`${window.env.API_ENDPOINT}/apps/app/${slug}`, {
+      const res = await fetch(`${window.env.API_ENDPOINT}/apps/app/${this.props.match.params.slug}`, {
         headers: {
           "Authorization": Utilities.getToken(),
           "Content-Type": "application/json",
@@ -145,16 +156,20 @@ class AppDetailPage extends Component {
       });
       if (res.ok && res.status == 200) {
         const app = await res.json();
-        this.setState({ app, loadingApp: false, gettingAppErrMsg: "" });
+        this.setState({ app, loadingApp: false, gettingAppErrMsg: "", displayErrorModal: false });
       } else {
-        this.setState({ loadingApp: false, gettingAppErrMsg: `failed to get app, unexpected status code: ${res.status}` });
+        this.setState({ loadingApp: false, gettingAppErrMsg: `Unexpected status code: ${res.status}`, displayErrorModal: true });
       }
     } catch (err) {
       console.log(err)
-      this.setState({ loadingApp: false, gettingAppErrMsg: err ? err.message : "Something went wrong, please try again." });
+      this.setState({ loadingApp: false, gettingAppErrMsg: err ? err.message : "Something went wrong, please try again.", displayErrorModal: true });
     }
   }
 
+  toggleErrorModal = () => {
+    this.setState({ displayErrorModal: !this.state.displayErrorModal });
+  }
+
   /**
    * Refetch all the data for this component and all its children
    *
@@ -191,7 +206,6 @@ class AppDetailPage extends Component {
       this.checkForFirstApp();
       return;
     }
-
     this.getApp();
   }
 
@@ -229,14 +243,6 @@ class AppDetailPage extends Component {
       this.state.getAppJob.stop();
     }
 
-    if (gettingAppErrMsg) {
-      return (
-        <div class="flex1 flex-column justifyContent--center alignItems--center">
-          <span className="icon redWarningIcon" />
-          <p className="u-color--chestnut u-fontSize--normal u-fontWeight--medium u-lineHeight--normal u-marginTop--10">{gettingAppErrMsg}</p>
-        </div>
-      )
-    }
 
     return (
       <div className="WatchDetailPage--wrapper flex-column flex1 u-overflow--auto">
@@ -315,6 +321,9 @@ class AppDetailPage extends Component {
                         toggleIsBundleUploading={this.toggleIsBundleUploading}
                         isBundleUploading={isBundleUploading}
                         refreshAppData={this.getApp}
+                        displayErrorModal={this.state.displayErrorModal}
+                        toggleErrorModal={this.toggleErrorModal}
+                        makingCurrentRelease={this.state.makingCurrentRelease}
                       />
                     } />
                     <Route exact path="/app/:slug/downstreams/:downstreamSlug/version-history/preflight/:sequence" render={props => <PreflightResultPage logo={app.iconUri} {...props} />} />
@@ -396,6 +405,15 @@ class AppDetailPage extends Component {
             </div>
           </Modal>
         }
+        {gettingAppErrMsg &&
+          <ErrorModal
+            errorModal={this.state.displayErrorModal}
+            toggleErrorModal={this.toggleErrorModal}
+            errMsg={gettingAppErrMsg}
+            tryAgain={this.getApp}
+            err="Failed to get application"
+            loading={this.state.loadingApp}
+          />}
       </div>
     );
   }

diff --git a/kotsadm/web/src/components/apps/AppVersionHistory.jsx b/kotsadm/web/src/components/apps/AppVersionHistory.jsx
@@ -121,7 +121,7 @@ class AppVersionHistory extends Component {
   }
 
   toggleDiffErrModal = (release) => {
-    this.setState({ 
+    this.setState({
       showDiffErrModal: !this.state.showDiffErrModal,
       releaseWithErr: !this.state.showDiffErrModal ? release : {}
     })
@@ -169,7 +169,7 @@ class AppVersionHistory extends Component {
       return (
         <div className="flex flex1 alignItems--center u-marginRight--10">
           <span className="u-fontSize--small u-fontWeight--medium u-lineHeight--normal u-color--dustyGray">Cannot generate diff <span className="replicated-link" onClick={() => this.toggleDiffErrModal(version)}>Why?</span></span>
-      </div>
+        </div>
       );
     } else {
       return (
@@ -982,6 +982,14 @@ class AppVersionHistory extends Component {
         <div className="flex-column flex1">
           <div className="flex flex1">
             <div className="flex1 flex-column alignItems--center">
+              {makingCurrentVersionErrMsg &&
+                <div className="ErrorWrapper flex justifyContent--center">
+                  <div className="icon redWarningIcon u-marginRight--10" />
+                  <div>
+                    <p className="title">Failed to deploy version</p>
+                    <p className="err">{makingCurrentVersionErrMsg}</p>
+                  </div>
+                </div>}
               {/* Active downstream */}
               {!gitopsEnabled && currentDownstreamVersion &&
                 <div className="TableDiff--Wrapper u-marginBottom--30">
@@ -1022,14 +1030,6 @@ class AppVersionHistory extends Component {
                 <div className={`flex-column flex1 ${showDiffOverlay ? "u-visibility--hidden" : ""}`}>
                   <div className="flex justifyContent--spaceBetween u-borderBottom--gray darker u-paddingBottom--10">
                     <p className="u-fontSize--larger u-fontWeight--bold u-color--tuna u-lineHeight--normal">All versions</p>
-                    {makingCurrentVersionErrMsg &&
-                      <div className="ErrorWrapper flex-auto flex alignItems--center">
-                        <div className="icon redWarningIcon u-marginRight--10" />
-                        <div>
-                          <p className="title">Failed to deploy version</p>
-                          <p className="err">{makingCurrentVersionErrMsg}</p>
-                        </div>
-                      </div>}
                     {versionHistory.length > 1 && this.renderDiffBtn()}
                   </div>
                   {/* Downstream version history */}
@@ -1234,7 +1234,7 @@ class AppVersionHistory extends Component {
             <button className="btn primary" onClick={this.hideDownstreamReleaseNotes}>Close</button>
           </div>
         </Modal>
- 
+
         <Modal
           isOpen={this.state.showDiffErrModal}
           onRequestClose={this.toggleDiffErrModal}

diff --git a/kotsadm/web/src/components/modals/ErrorModal.jsx b/kotsadm/web/src/components/modals/ErrorModal.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+import Modal from "react-modal";
+
+export default function ErrorModal(props) {
+  const { errorModal, toggleErrorModal, errMsg, tryAgain, loading, err } = props;
+
+  return (
+    <Modal
+      isOpen={errorModal}
+      shouldReturnFocusAfterClose={false}
+      onRequestClose={() => { toggleErrorModal({}); }}
+      ariaHideApp={false}
+      contentLabel="Modal"
+      className="Modal DefaultSize"
+    >
+      <div className="Modal-body">
+        <div className="flex flex-column">
+          <div className="flex flex1 justifyContent--center alignItems--center ">
+            <span className="icon redWarningIcon flex-auto" />
+            <div className="flex flex-column u-marginLeft--10">
+              <p className="u-color--chestnut u-fontSize--normal u-fontWeight--bold u-lineHeight--normal">{err}</p>
+              <p className="u-color--chestnut u-fontSize--normal u-fontWeight--medium u-lineHeight--normal">{errMsg}</p>
+            </div>
+            <div className="flex-auto u-marginLeft--20">
+              <button
+                className="btn primary blue"
+                onClick={tryAgain}
+                disabled={loading}
+              >
+                {loading ? "Trying..." : "Try again"}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/kotsadm/web/src/components/shared/AirgapRegistrySettings.jsx b/kotsadm/web/src/components/shared/AirgapRegistrySettings.jsx
@@ -1,12 +1,13 @@
 import React, { Component } from "react";
 import { withRouter } from "react-router-dom";
-import { graphql, compose, withApollo } from "react-apollo";
-import Loader from "../shared/Loader";
-import { getImageRewriteStatus } from "../../queries/AppsQueries";
-import { Repeater } from "../../utilities/repeater";
+import { compose, withApollo } from "react-apollo";
 import get from "lodash/get";
+
+import Loader from "../shared/Loader";
+import ErrorModal from "../modals/ErrorModal";
 import "../../scss/components/watches/WatchDetailPage.scss";
 import { Utilities } from "../../utilities/utilities";
+import { Repeater } from "../../utilities/repeater";
 
 class AirgapRegistrySettings extends Component {
 
@@ -36,7 +37,8 @@ class AirgapRegistrySettings extends Component {
       updateChecker: new Repeater(),
       rewriteStatus: "",
       rewriteMessage: "",
-      fetchRegistryErrMsg: ""
+      fetchRegistryErrMsg: "",
+      displayErrorModal: false
     }
   }
 
@@ -165,7 +167,7 @@ class AirgapRegistrySettings extends Component {
       return;
     }
 
-    this.setState({ loading: true, fetchRegistryErrMsg: "" });
+    this.setState({ loading: true, fetchRegistryErrMsg: "", displayErrorModal: false });
 
     let url = `${window.env.API_ENDPOINT}/registry`;
     if (this.props.app) {
@@ -187,7 +189,8 @@ class AirgapRegistrySettings extends Component {
             password: result.password,
             namespace: result.namespace,
             loading: false,
-            fetchRegistryErrMsg: ""
+            fetchRegistryErrMsg: "",
+            displayErrorModal: false
           });
 
           if (this.props.gatherDetails) {
@@ -196,15 +199,19 @@ class AirgapRegistrySettings extends Component {
           }
 
         } else {
-          this.setState({ loading: false, fetchRegistryErrMsg: "Unable to get registry info, please try again." });
+          this.setState({ loading: false, fetchRegistryErrMsg: "Unable to get registry info, please try again.", displayErrorModal: true });
         }
       })
       .catch(err => {
         console.log(err);
-        this.setState({ loading: false, fetchRegistryErrMsg: err ? `Unable to get registry info: ${err.message}` : "Something went wrong, please try again." });
+        this.setState({ loading: false, fetchRegistryErrMsg: err ? `Unable to get registry info: ${err.message}` : "Something went wrong, please try again.", displayErrorModal: true });
       })
   }
 
+  toggleErrorModal = () => {
+    this.setState({ displayErrorModal: !this.state.displayErrorModal });
+  }
+
   triggerStatusUpdates = () => {
     fetch(`${window.env.API_ENDPOINT}/imagerewritestatus`, {
       headers: {
@@ -284,15 +291,6 @@ class AirgapRegistrySettings extends Component {
       );
     }
 
-    if (this.state.fetchRegistryErrMsg) {
-      return (
-        <div class="flex1 flex-column justifyContent--center alignItems--center">
-          <span className="icon redWarningIcon" />
-          <p className="u-color--chestnut u-fontSize--normal u-fontWeight--medium u-lineHeight--normal u-marginTop--10">{this.state.fetchRegistryErrMsg}</p>
-        </div>
-      )
-    }
-
     const namespaceSubtext = namespaceDescription || "Changing the namespace will rewrite all of your airgap images and push them to your registry."
 
     let testStatusText = "";
@@ -376,6 +374,15 @@ class AirgapRegistrySettings extends Component {
             </div>
           </div>
         }
+        {this.state.fetchRegistryErrMsg &&
+          <ErrorModal
+            errorModal={this.state.displayErrorModal}
+            toggleErrorModal={this.toggleErrorModal}
+            errMsg={this.state.fetchRegistryErrMsg}
+            tryAgain={this.fetchRegistryInfo}
+            err="Failed to get registry info"
+            loading={this.state.loading}
+          />}
       </div>
     )
   }