From 3f46d13ccf4751442a61979cea99a8380fd1321d Mon Sep 17 00:00:00 2001 From: Sudhanshu Gautam Date: Mon, 2 Sep 2019 02:23:20 +0530 Subject: [PATCH] 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 --- src/App.scss | 3 +- src/containers/home/home.js | 173 ++++++++++++++++++++++------------ src/containers/home/home.scss | 14 +++ 3 files changed, 127 insertions(+), 63 deletions(-) diff --git a/src/App.scss b/src/App.scss index 2fd5a5d..7bceec8 100644 --- a/src/App.scss +++ b/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 { diff --git a/src/containers/home/home.js b/src/containers/home/home.js index c718fba..805b5d0 100644 --- a/src/containers/home/home.js +++ b/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,42 +310,63 @@ class Home extends React.Component { }; buildImageCheck = async (request_hash) => { - return new Promise(async (resolve, reject) => { - try { - if (!this.state.isBuilding) { - return; - } - const buildStatusResponse = await this.dataService.buildStatusCheck(request_hash); - if (buildStatusResponse.status === 202) { - if (buildStatusResponse.headers['X-Build-Queue-Position'] !== undefined) { - this.setState({ - queuePosition: buildStatusResponse.headers['X-Build-Queue-Position'], - }); - } - 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, - errorDialogMessage: ( - <> - {buildStatusResponse.data.error}
- Build logs - - ), - }); - resolve(); - } else { - throw buildStatusResponse.data; - } - } catch (e) { - reject(e); + try { + if (!this.state.isBuilding) { + return; } - }); + const buildStatusResponse = await this.dataService.buildStatusCheck(request_hash); + if (buildStatusResponse.status === 202) { + if (buildStatusResponse.headers['X-Build-Queue-Position'] !== undefined) { + this.setState({ + queuePosition: buildStatusResponse.headers['X-Build-Queue-Position'], + }); + } + await sleep(buildStatusCheckInterval); + await this.buildImageCheck(request_hash); + } else if (buildStatusResponse.status === 200) { + await this.displayBuiltImageData(buildStatusResponse); + } else if (buildStatusResponse.status === 409) { + this.setState({ + openErrorDialog: true, + errorDialogMessage: ( + <> + {buildStatusResponse.data.error}
+ Build logs + + ), + }); + } else { + throw buildStatusResponse.data; + } + } catch (e) { + if (e.response.status === 409) { + this.setState({ + isBuilding: false, + openErrorDialog: true, + errorDialogMessage: ( + <> + {e.response.data.error}
+ Build logs + + ), + }); + } 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); @@ -576,13 +608,13 @@ class Home extends React.Component {
{ this.state.packages.map((package_name, i) => - this.deletePackage( - i)} - label={package_name} - /> + this.deletePackage( + i)} + label={package_name} + /> ) } {this.state.selection.device['title']}
{this.props.t('Target')}: {this.state.selection.device['target']}
{this.props.t('Version')}: {this.state.data[this.state.selection.version].name} ({this.state.data[this.state.selection.version].revision}) + + } + id="packages-manifest" + > + Installed Packages ({this.state.builtDeviceManifest.length}) + + +
+ { + this.state.builtDeviceManifest.map( + (package_name) =>
+ {package_name} +
+ ) + } +
+ + {this.props.t('Downloads')}: { - this.state.builtImages.map((image) => ( - <> -
- - - )) - } -   + this.state.builtImages.map((image) => +
+ +
+ ) + } +   { this.state.downloading && ( diff --git a/src/containers/home/home.scss b/src/containers/home/home.scss index 25ec0d9..52b296c 100644 --- a/src/containers/home/home.scss +++ b/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;