Aligned container progress.

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(<h2>{Math.round(sum*100)/100}%</h2>)
-        fields.push(<ContainerProgress pBar1={values[0]} pBar2={values[1]} pBar3={values[2]} pBar4={values[3]} />);
-
         body = (
-            <div className="details-progress">
-              <h2>Downloading Image</h2>
-              {fields}
+          <div className="details-progress">
+            <h2>Downloading Image</h2>
+            <h2>{Math.round(sum*100)/100}%</h2>
+            <div className="container-progress-wrapper">
+              <ContainerProgress pBar1={values[0]} pBar2={values[1]} pBar3={values[2]} pBar4={values[3]} />
             </div>
-          );
+          </div>
+        );
 
       } else if (this.props.container.State.Waiting) {
         body = (

src/components/ContainerProgress.react.js

@@ -22,16 +22,16 @@ var ContainerProgress = React.createClass({
     return (
       <div className="container-progress">
         <div className="bar-1 bar-bg">
-          <div className="bar-1 bar-fg" style={pBar4Style}></div>
+          <div className="bar-fg" style={pBar4Style}></div>
         </div>
         <div className="bar-2 bar-bg">
-          <div className="bar-2 bar-fg" style={pBar3Style}></div>
+          <div className="bar-fg" style={pBar3Style}></div>
         </div>
         <div className="bar-3 bar-bg">
-          <div className="bar-3 bar-fg" style={pBar2Style}></div>
+          <div className="bar-fg" style={pBar2Style}></div>
         </div>
         <div className="bar-4 bar-bg">
-          <div className="bar-4 bar-fg" style={pBar1Style}></div>
+          <div className="bar-fg" style={pBar1Style}></div>
         </div>
       </div>
     );

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;

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;

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 {