diff --git a/src/components/ContainerHome.react.js b/src/components/ContainerHome.react.js index bcc2f07f25..4a9d7618ea 100644 --- a/src/components/ContainerHome.react.js +++ b/src/components/ContainerHome.react.js @@ -52,8 +52,7 @@ var ContainerHome = React.createClass({ ); } else if (this.props.container && this.props.container.State.Downloading) { if (this.props.container.Progress !== undefined) { - - let fields = []; + let values = []; let sum = 0.0; @@ -65,15 +64,15 @@ var ContainerHome = React.createClass({ sum = sum / this.props.container.Progress.amount; - fields.push(

{Math.round(sum*100)/100}%

) - fields.push(); - body = ( -
-

Downloading Image

- {fields} +
+

Downloading Image

+

{Math.round(sum*100)/100}%

+
+
- ); +
+ ); } else if (this.props.container.State.Waiting) { body = ( diff --git a/src/components/ContainerProgress.react.js b/src/components/ContainerProgress.react.js index 722f98b9d7..175fb4d72a 100644 --- a/src/components/ContainerProgress.react.js +++ b/src/components/ContainerProgress.react.js @@ -22,16 +22,16 @@ var ContainerProgress = React.createClass({ return (
-
+
-
+
-
+
-
+
); diff --git a/src/utils/DockerUtil.js b/src/utils/DockerUtil.js index f5315de6b9..f46b0be808 100644 --- a/src/utils/DockerUtil.js +++ b/src/utils/DockerUtil.js @@ -374,11 +374,11 @@ export default { return r; }, {}); - + let layersToLoad = _.keys(layerProgress).length; - console.log("nbLayers:" + layersToLoad) + console.log("nbLayers:" + layersToLoad); // Split the loading in a few columns for more feedback let columns = {}; @@ -388,7 +388,7 @@ export default { for (let i = 0; i < columns.amount; i++) { - let layerAmount = Math.ceil(layersToLoad / (columns.amount - i)) + let layerAmount = Math.ceil(layersToLoad / (columns.amount - i)); layersToLoad -= layerAmount; columns.progress[i] = { layerIDs:[], nbLayers:0 , maxLayers:layerAmount , value:0.0 }; } @@ -397,7 +397,7 @@ export default { // scheduled to inform about progression at given interval let tick = null; - + // data is associated with one layer only (can be identified with id) stream.on('data', str => { @@ -413,12 +413,14 @@ export default { } if (data.status === 'Already exists') { - + + console.log("Already exists."); + //layerProgress[data.id].current = 1; //layerProgress[data.id].total = 1; } else if (data.status === 'Downloading') { - + // aduermael: How total could be <= 0 ? // if (data.progressDetail.total <= 0) { @@ -434,13 +436,13 @@ export default { { // test if we can still add layers to that column if (columns.progress[columns.toFill].nbLayers == columns.progress[columns.toFill].maxLayers) columns.toFill++; - + layerProgress[data.id].column = columns.toFill; columns.progress[columns.toFill].layerIDs.push(data.id); columns.progress[columns.toFill].nbLayers++; } - + //} if (!tick) { @@ -451,7 +453,7 @@ export default { for (let i = 0; i < columns.amount; i++) { columns.progress[i].value = 0.0; - + // Start only if the column has accurate values for all layers if (columns.progress[i].nbLayers == columns.progress[i].maxLayers) { @@ -459,7 +461,7 @@ export default { let totalSum = 0; let currentSum = 0; - for (let j = 0; j < columns.progress[i].nbLayers; j++) + for (let j = 0; j < columns.progress[i].nbLayers; j++) { layer = layerProgress[columns.progress[i].layerIDs[j]]; totalSum += layer.total; diff --git a/styles/container-progress.less b/styles/container-progress.less index a8bf96613a..a8e616b22d 100644 --- a/styles/container-progress.less +++ b/styles/container-progress.less @@ -1,4 +1,14 @@ +.container-progress-wrapper { + margin-left: 37%; +} + .container-progress { + display: inline-block; + position: relative; + min-width: 100px; + max-width: 100px; + min-height: 100px; + max-height: 100px; width: 100px; height: 100px; border: 4px solid @brand-primary; diff --git a/styles/right-panel.less b/styles/right-panel.less index a72f14a9d0..5472b925dc 100644 --- a/styles/right-panel.less +++ b/styles/right-panel.less @@ -126,10 +126,10 @@ } .details-progress { margin: 20% auto 0; - text-align: center; width: 400px; h2 { margin-bottom: 20px; + text-align: center; } } .details-panel {