Introduce interface to list packages in built image

A dropdown interface that lists all the installed packages for the
built images.

Fixes #7

Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>

src/App.scss

@@ -37,7 +37,8 @@
   padding: 15px 10%;
   box-sizing: border-box;
   text-align: left;
-  border-radius: 0
+  border-radius: 0;
+  z-index: 10;
 }
 
 .report-link {

src/containers/home/home.js

@@ -21,10 +21,14 @@ import {
   Tabs,
   Tooltip,
   Typography,
+  ExpansionPanel,
+  ExpansionPanelSummary,
+  ExpansionPanelDetails
 } from '@material-ui/core';
 import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
 import WarningIcon from '@material-ui/icons/Warning';
 import BuildIcon from '@material-ui/icons/Build';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import './home.scss';
 import {withTranslation} from 'react-i18next';
 import FuzzySet from 'fuzzyset.js';
@@ -74,6 +78,7 @@ class Home extends React.Component {
     packages: this.packages,
     configChanged: true,
     packageName: '',
+    builtDeviceManifest: [],
     builtImages: [],
     isBuilding: false,
     queuePosition: -1,
@@ -280,6 +285,12 @@ class Home extends React.Component {
   };
 
   displayBuiltImageData = async (buildStatusResponse) => {
+    const manifestResponse = await this.dataService.getDeviceManifest(
+      buildStatusResponse.data.image_folder + '/' + buildStatusResponse.data.image_prefix + '.manifest'
+    );
+
+    const builtDeviceManifest = manifestResponse.data.split('\n');
+
     let builtImages = [];
     buildStatusResponse.data.images.forEach((image) => {
       builtImages.push({
@@ -290,6 +301,7 @@ class Home extends React.Component {
     });
     if (this.state.isBuilding) {
       this.setState({
+        builtDeviceManifest,
         builtImages,
         configChanged: false,
         isBuilding: false,
@@ -298,7 +310,6 @@ class Home extends React.Component {
   };
 
   buildImageCheck = async (request_hash) => {
-    return new Promise(async (resolve, reject) => {
     try {
       if (!this.state.isBuilding) {
         return;
@@ -312,10 +323,8 @@ class Home extends React.Component {
         }
         await sleep(buildStatusCheckInterval);
         await this.buildImageCheck(request_hash);
-          resolve();
       } else if (buildStatusResponse.status === 200) {
         await this.displayBuiltImageData(buildStatusResponse);
-          resolve();
       } else if (buildStatusResponse.status === 409) {
         this.setState({
           openErrorDialog: true,
@@ -326,14 +335,38 @@ class Home extends React.Component {
             </>
           ),
         });
-          resolve();
       } else {
         throw buildStatusResponse.data;
       }
     } catch (e) {
-        reject(e);
+      if (e.response.status === 409) {
-      }
+        this.setState({
+          isBuilding: false,
+          openErrorDialog: true,
+          errorDialogMessage: (
+            <>
+              {e.response.data.error} <br />
+              <a href={asu + e.response.data.log} target="_blank" rel="noopener noreferrer">Build logs</a>
+            </>
+          ),
         });
+      } else if (e.response.status === 422) {
+        this.setState({
+          isBuilding: false,
+          openErrorDialog: true,
+          errorDialogMessage: (
+            <>
+              {e.response.data.error}
+            </>
+          ),
+        });
+      } else {
+        this.setState({
+          isBuilding: false,
+          showUnexpectedErrorBar: true,
+        });
+      }
+    }
   };
 
   buildImage = async () => {
@@ -348,7 +381,6 @@ class Home extends React.Component {
         builtImages: [],
       });
       let buildResponse = await this.dataService.buildImage(board, packages, target, version);
-      console.log(buildResponse);
       if (buildResponse.status === 202 && buildResponse.data['request_hash'] !== undefined) {
         const request_hash = buildResponse.data['request_hash'];
         await sleep(buildStatusCheckInterval);
@@ -638,15 +670,32 @@ class Home extends React.Component {
                                   {this.props.t('Model')}: <b> {this.state.selection.device['title']} </b> <br />
                                   {this.props.t('Target')}: {this.state.selection.device['target']} <br />
                                   {this.props.t('Version')}: {this.state.data[this.state.selection.version].name} ({this.state.data[this.state.selection.version].revision})
+                                  <ExpansionPanel className="installed-packages" elevation={0}>
+                                    <ExpansionPanelSummary
+                                      expandIcon={<ExpandMoreIcon />}
+                                      id="packages-manifest"
+                                    >
+                                      <Typography className="installed-packages-title">Installed Packages ({this.state.builtDeviceManifest.length})</Typography>
+                                    </ExpansionPanelSummary>
+                                    <ExpansionPanelDetails>
+                                      <div>
+                                        {
+                                          this.state.builtDeviceManifest.map(
+                                            (package_name) => <div key={package_name}>
+                                              {package_name}
+                                            </div>
+                                          )
+                                        }
+                                      </div>
+                                    </ExpansionPanelDetails>
+                                  </ExpansionPanel>
                                 </Grid>
                                 <Grid item xs>
                                   <b>{this.props.t('Downloads')}: </b>
                                   {
-                                      this.state.builtImages.map((image) => (
+                                    this.state.builtImages.map((image) => 
-                                        <>
+                                      <div key={image.url}>
-                                          <br />
                                         <Button
-                                            key={image.url}
                                           className="download-button"
                                           href={image.url}
                                           color="primary"
@@ -657,8 +706,8 @@ class Home extends React.Component {
                                             className="download-icon"/>
                                           {image.type}
                                         </Button>
-                                        </>
+                                      </div>
-                                      ))
+                                    )
                                   }
                                   &nbsp;
                                   {

src/containers/home/home.scss

@@ -23,6 +23,19 @@ $bg-color: #f0f0f0;
 
     .device-info {
       margin-bottom: 15px;
+
+      .installed-packages {
+        width: 80%;
+        border: 1px solid #e3e3e3;
+        border-radius: 7px;
+        margin-top: 16px !important;
+      }
+      .installed-packages::before {
+        display: none;
+      }
+      .installed-packages-title {
+        font-weight: bold;
+      }
     }
 
     .version-select {
@@ -76,6 +89,7 @@ $bg-color: #f0f0f0;
       margin-bottom: 15px;
     }
 
+
     .download-button {
       margin-top: 17px;