Merge pull request #8 from aws-samples/housekeeping

Housekeeping

src/cfn/template.yaml

@@ -16,7 +16,7 @@ Globals:
         CREATE_CLOUDFRONT_DISTRIBUTION: !Ref CreateCloudFrontDistribution
         REGION: !Ref AWS::Region
         TO_BUCKET: !Ref WebUIBucket
-        VERSION: "0.15"
+        VERSION: "0.16"
 
 Parameters:
   AdminEmail:

src/web-ui/src/components/FileUpload.js

@@ -5,7 +5,7 @@ export default ({ id, onChange }) => (
     <div className="form-prompt">
       Use your own image
       <div className="form-instructions">
-        Image must be .jpeg or .png format and no larger than 5MB. Your image
+        Image must be .jpeg or .png format and no larger than 4MB. Your image
         isn't stored.
       </div>
     </div>

src/web-ui/src/components/ImageMode.js

@@ -38,7 +38,7 @@ export default ({ gateway, projectVersionArn }) => {
       "data:image/png;base64"
     ].includes(type);
 
-    const validSize = size < 5000000;
+    const validSize = size < 4000000;
     const result = { isValid: validType && validSize };
     const errors = [];
     if (!validType) errors.push("the image format is not valid");

src/web-ui/src/components/ProjectActions.js

@@ -1,7 +1,10 @@
 import React, { useState } from "react";
 import { Alert, Button, Form, Modal } from "react-bootstrap";
 
+import { formatErrorMessage } from "../utils";
+
 export default ({ gateway, onError, project, refreshProjects }) => {
+  const [errorMessage, setErrorMessage] = useState(undefined);
   const [formState, setFormState] = useState("initial");
   const [minInferenceUnits, setMinInferenceUnits] = useState("");
   const [show, setShow] = useState(false);
@@ -26,7 +29,10 @@ export default ({ gateway, onError, project, refreshProjects }) => {
         parseInt(minInferenceUnits, 10)
       )
       .then(() => setFormState("saved"))
-      .catch(() => setFormState("error"));
+      .catch(e => {
+        setErrorMessage(formatErrorMessage(e));
+        setFormState("error");
+      });
   };
 
   const stopModel = e => {
@@ -70,8 +76,8 @@ export default ({ gateway, onError, project, refreshProjects }) => {
           </Modal.Header>
           <Modal.Body>
             <p>
-              Starting a model takes a while to complete. To check the current
-              state of the model, refresh the Projects page.
+              A model might take a while to start. To check the current state of
+              the model, refresh the Projects page.
               <br />
               <br />
               <b>
@@ -86,7 +92,7 @@ export default ({ gateway, onError, project, refreshProjects }) => {
               <Alert variant="warning">Please wait</Alert>
             )}
             {formState === "error" && (
-              <Alert variant="danger">An error happened. Retry.</Alert>
+              <Alert variant="danger">{errorMessage}</Alert>
             )}
             {formState === "saved" && (
               <Alert variant="success">The model is starting.</Alert>

src/web-ui/src/components/ProjectsSummary.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Alert, Button, Card, Spinner, Table } from "react-bootstrap";
-import { mapResults } from "../utils";
+import { formatErrorMessage, mapResults } from "../utils";
 
 import ProjectActions from "./ProjectActions";
 
@@ -22,7 +22,7 @@ export default ({ gateway, onHelp, onVersionClick }) => {
           )
         ).then(x => setProjects(mapResults(x)))
       )
-      .catch(e => setErrorDetails(e.toString()));
+      .catch(e => setErrorDetails(formatErrorMessage(e)));
   }, [gateway, projectsRefreshCycle]);
 
   return (

src/web-ui/src/utils/index.js

@@ -43,3 +43,14 @@ export const retryWrapper = (p, timeout, retryN) =>
         );
       })
   );
+
+export const formatErrorMessage = e => {
+  let msg = "An error happened";
+  if (e.response) {
+    if (e.response.status) msg += ` (${e.response.status} status code)`;
+    if (e.response.data && e.response.data.Message)
+      msg += `: ${e.response.data.Message}`;
+  }
+
+  return msg;
+};