Merge pull request #704 from porter-dev/master

Merge chart upgrade errors to staging

dashboard/src/components/SaveButton.tsx

@@ -81,6 +81,12 @@ const StatusWrapper = styled.div`
   font-size: 13px;
   color: #ffffff55;
   margin-right: 25px;
+  padding: 0 10px; 
+
+  max-width: 500px; 
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; 
 
   > i {
     font-size: 18px;

dashboard/src/main/CurrentError.tsx

@@ -29,12 +29,18 @@ export default class CurrentError extends Component<PropsType, StateType> {
     if (this.props.currentError) {
       if (!this.state.expanded) {
         return (
-          <StyledCurrentError onClick={() => this.setState({ expanded: true })}>
+          <StyledCurrentError>
             <ErrorText>Error: {this.props.currentError}</ErrorText>
+            <ExpandButton onClick={() => this.setState({ expanded: true })}>
+              <i className="material-icons">launch</i>
+            </ExpandButton>
             <CloseButton
               onClick={(e) => {
-                this.context.setCurrentError(null);
                 e.stopPropagation();
+
+                this.setState({ expanded: false }, () => {
+                  this.context.setCurrentError(null)
+                })
               }}
             >
               <CloseButtonImg src={close} />
@@ -44,12 +50,26 @@ export default class CurrentError extends Component<PropsType, StateType> {
       }
 
       return (
-        <ExpandedError onClick={() => this.setState({ expanded: false })}>
-          Error: {this.props.currentError}
-          <CloseButtonAlt onClick={() => this.context.setCurrentError(null)}>
-            <CloseButtonImg src={close} />
-          </CloseButtonAlt>
-        </ExpandedError>
+        <Overlay>
+          <ExpandedError>
+            Porter encountered an error. Full error log:
+            <CodeBlock>
+              {this.props.currentError}
+            </CodeBlock>
+            <ExpandButtonAlt onClick={() => this.setState({ expanded: false })}>
+              <i className="material-icons">remove</i>
+            </ExpandButtonAlt>
+            <CloseButtonAlt onClick={(e) => {
+              e.stopPropagation();
+
+              this.setState({ expanded: false }, () => {
+                this.context.setCurrentError(null)
+              })
+            }}>
+              <CloseButtonImg src={close} />
+            </CloseButtonAlt>
+          </ExpandedError>
+        </Overlay>
       );
     }
 
@@ -66,7 +86,6 @@ const CloseButton = styled.div`
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  margin-left: 10px;
   cursor: pointer;
   :hover {
     background-color: #ffffff11;
@@ -87,13 +106,13 @@ const ErrorText = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: calc(100% - 50px);
+  width: calc(100% - 80px);
 `;
 
 const StyledCurrentError = styled.div`
   position: fixed;
   bottom: 22px;
-  width: 300px;
+  width: 310px;
   left: 20px;
   padding: 15px;
   padding-right: 0px;
@@ -127,10 +146,75 @@ const StyledCurrentError = styled.div`
   }
 `;
 
-const ExpandedError = styled(StyledCurrentError)`
-  width: 500px;
+const ExpandButton = styled(CloseButton)`
+  display: flex;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  cursor: pointer;
+
+  :hover {
+    background-color: #ffffff11;
+  }
+
+  > i {
+    font-size: 16px; 
+  }
+`
+
+const ExpandButtonAlt = styled(ExpandButton)`
+  position: absolute;
+  top: 5px;
+  right: 34px;
+`
+
+const Overlay = styled.div`
+  position: fixed;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ExpandedError = styled.div`
+  position: fixed;
+  display: block;
+  width: 700px;
+  left: calc(50% - 350px);
   height: auto;
-  max-height: 300px;
+  max-height: 500px; 
+  top: 50%; 
+  transform: translateY(-50%);
   padding: 20px;
   overflow-y: auto;
+  background: #272731;
+  border: 1px solid #ffffff55;
+  font-family: "Work Sans", sans-serif;
+  font-size: 13px; 
+  border-radius: 12px; 
+  
+`;
+
+const CodeBlock = styled.span`
+  display: block;
+  background-color: #1b1d26;
+  color: white;
+  border-radius: 5px;
+  font-family: monospace;
+  user-select: text;
+  max-height: 400px;
+  width: 90%;
+  margin-left: 5%; 
+  margin-top: 20px; 
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 10px; 
+  overflow-wrap: break-word;
 `;

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -276,8 +276,19 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         });
       })
       .catch((err) => {
-        console.log(err);
-        this.setState({ saveValuesStatus: "error" });
+        let parsedErr =
+          err?.response?.data?.errors && err.response.data.errors[0];
+
+        if (parsedErr) {
+          err = parsedErr;
+        }
+
+        this.setState({
+          saveValuesStatus: err,
+        });
+
+        setCurrentError(parsedErr);
+
         window.analytics.track("Failed to Upgrade Chart", {
           chart: this.state.currentChart.name,
           values: valuesYaml,
@@ -328,8 +339,20 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         cb && cb();
       })
       .catch((err) => {
-        console.log(err);
-        this.setState({ saveValuesStatus: "error", loading: false });
+        let parsedErr =
+          err?.response?.data?.errors && err.response.data.errors[0]
+
+        if (parsedErr) {
+          err = parsedErr;
+        }
+        
+        this.setState({
+          saveValuesStatus: err,
+          loading: false,
+        });
+
+        setCurrentError(parsedErr);
+
         window.analytics.track("Failed to Upgrade Chart", {
           chart: this.state.currentChart.name,
           values: valuesYaml,

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -322,9 +322,18 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
         this.refreshChart();
       })
       .catch((err) => {
-        console.log(err);
-        this.setState({ saveValuesStatus: "error" });
-        setCurrentError(JSON.stringify(err));
+        let parsedErr =
+          err?.response?.data?.errors && err.response.data.errors[0];
+          
+        if (parsedErr) {
+          err = parsedErr;
+        }
+
+        this.setState({
+          saveValuesStatus: parsedErr,
+        });
+
+        setCurrentError(parsedErr);
       });
   };
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -82,7 +82,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
 
   redeployWithNewImage = (img: string, tag: string) => {
     this.setState({ saveValuesStatus: "loading" });
-    let { currentCluster, currentProject } = this.context;
+    let { currentCluster, currentProject, setCurrentError } = this.context;
 
     // If tag is explicitly declared, parse tag
     let imgSplits = img.split(":");
@@ -130,8 +130,18 @@ export default class SettingsSection extends Component<PropsType, StateType> {
         this.props.refreshChart();
       })
       .catch((err) => {
-        console.log(err);
-        this.setState({ saveValuesStatus: "error" });
+        let parsedErr =
+          err?.response?.data?.errors && err.response.data.errors[0];
+          
+        if (parsedErr) {
+          err = parsedErr;
+        }
+
+        this.setState({
+          saveValuesStatus: parsedErr,
+        });
+
+        setCurrentError(parsedErr);
       });
   };
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/ValuesYaml.tsx

@@ -67,8 +67,18 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
         this.props.refreshChart();
       })
       .catch((err) => {
-        console.log(err);
-        this.setState({ saveValuesStatus: "error" });
+        let parsedErr =
+          err?.response?.data?.errors && err.response.data.errors[0];
+          
+        if (parsedErr) {
+          err = parsedErr;
+        }
+
+        this.setState({
+          saveValuesStatus: parsedErr,
+        });
+
+        setCurrentError(parsedErr);
       });
   };
 

dashboard/src/main/home/launch/launch-flow/LaunchFlow.tsx

@@ -179,7 +179,7 @@ class LaunchFlow extends Component<PropsType, StateType> {
           err = parsedErr;
         }
         this.setState({
-          saveValuesStatus: `Could not deploy template: ${err}`,
+          saveValuesStatus: parsedErr,
         });
         setCurrentError(err.response.data.errors[0]);
         window.analytics.track("Failed to Deploy Add-on", {

docs/guides/template-versioning-and-upgrades.md

@@ -0,0 +1,28 @@
+
+> 📘
+>
+> **Note:** this functionality was introduced in [Porter release 0.3.0](https://docs.getporter.dev/changelog/v030-tuesday-18-may-2021). By default, all charts deployed before this release were versioned with `v0.1.0`. If you experience any issues upgrading from `v0.1.0`, it is recommended that you **re-deploy the service with the latest version from the Launch tab**.
+
+
+# Deploying a Specific Template Version
+
+Every application template that you deploy on Porter has a specific version. You will be given the option to select the version when you are launching the template:
+
+![Launch template version](https://files.readme.io/64987b5-Screen_Shot_2021-05-18_at_5.47.38_PM.png "Screen Shot 2021-05-18 at 5.47.38 PM.png")
+
+# How to Upgrade
+
+After deploying the template, you will be notified if a chart upgrade is available:
+
+![Chart upgrade available](https://files.readme.io/34bb4a0-Screen_Shot_2021-05-18_at_5.45.42_PM.png "Screen Shot 2021-05-18 at 5.45.42 PM.png")
+
+This upgrade will be of three different types, following [semantic versioning guidelines](https://semver.org/):
+- **Patch upgrade** (ex. `v0.20.0 -> v0.20.1`): upgrades with backwards-compatible bug fixes. These upgrades will not require any configuration changes: you will simply be asked to upgrade the chart, and the upgrade will occur after confirmation. 
+- **Minor upgrade** (ex. `v0.20.0 -> v0.21.0`): new features with backwards-compatible configuration. These upgrades will not require any configuration changes: you will simply be asked to upgrade the chart, and the upgrade will occur after confirmation. 
+- **Major upgrade** (ex. `v0.20.0 -> v1.0.0`): substantial new feature sets that **may** require configuration changes.  These upgrades will link to docs describing the upgrade process: we will try our best to make all major upgrades as backwards-compatible as possible, with any backwards incompatibilities documented clearly.
+
+# Reverting an Upgrade
+
+If an upgrade causes unexpected behavior or introduces a bug, you will be able to revert this upgrade immediately from the Porter dashboard. You can do this by clicking into the chart, expanding the list of revisions, and clicking on the "Revert" button to roll back the version:
+
+![Revert to revision](https://files.readme.io/10971ce-Screen_Shot_2021-05-18_at_5.49.42_PM.png "Screen Shot 2021-05-18 at 5.49.42 PM.png")

server/api/release_handler.go

@@ -751,7 +751,7 @@ func (app *App) HandleUpgradeRelease(w http.ResponseWriter, r *http.Request) {
 	if err != nil {
 		app.sendExternalError(err, http.StatusInternalServerError, HTTPError{
 			Code:   ErrReleaseDeploy,
-			Errors: []string{"error upgrading release " + err.Error()},
+			Errors: []string{err.Error()},
 		}, w)
 
 		return
@@ -923,7 +923,7 @@ func (app *App) HandleReleaseDeployWebhook(w http.ResponseWriter, r *http.Reques
 	if err != nil {
 		app.sendExternalError(err, http.StatusInternalServerError, HTTPError{
 			Code:   ErrReleaseDeploy,
-			Errors: []string{"error upgrading release " + err.Error()},
+			Errors: []string{err.Error()},
 		}, w)
 
 		return