fix(image-builder): fixes the stability of building images

bleenco · Oct 3, 2017 · ee7609e · ee7609e
1 parent 13fe0aa
commit ee7609e
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -98,7 +98,6 @@
     "@types/sqlite3": "^3.1.1",
     "@types/temp": "^0.8.29",
     "@types/uuid": "^3.4.2",
-    "@types/webpack": "^3.0.12",
     "@types/webpack-dev-server": "^2.4.1",
     "@types/ws": "3.0.2",
     "@types/yamljs": "^0.2.30",

diff --git a/src/api/image-builder.ts b/src/api/image-builder.ts
@@ -102,15 +102,19 @@ export function getImages(): Promise<any> {
             const dockerfile = getFilePath(`images/${img.name}/Dockerfile`);
             const initsh = getFilePath(`images/${img.name}/init.sh`);
 
-            return fs.readFile(dockerfile)
-              .then(dockerfileContents => {
-                return fs.readFile(initsh).then(initshContents => {
-                  img.dockerfile = dockerfileContents.toString();
-                  img.initsh = initshContents.toString();
+            if (fs.existsSync(dockerfile) && fs.existsSync(initsh)) {
+              return fs.readFile(dockerfile)
+                .then(dockerfileContents => {
+                  return fs.readFile(initsh).then(initshContents => {
+                    img.dockerfile = dockerfileContents.toString();
+                    img.initsh = initshContents.toString();
 
-                  return img;
+                    return img;
+                  });
                 });
-              });
+            } else {
+              return Promise.resolve(img);
+            }
           }))
           .then(imgs => resolve(imgs))
           .catch(err => reject(err));

diff --git a/src/app/components/app-images/app-images.component.html b/src/app/components/app-images/app-images.component.html
@@ -36,7 +36,7 @@ <h1>Docker Build Images</h1>
 
         <div *ngIf="tab === 'images'">
           <div class="content-box image-builder-box">
-            <div class="columns is-multiline">
+            <div class="columns is-multiline" *ngIf="images?.length">
               <div class="column is-4" *ngFor="let i of images; let index = index;">
                 <div class="image-item">
                   <h2>{{ i.name }}</h2>
@@ -49,6 +49,24 @@ <h2>{{ i.name }}</h2>
                 </div>
               </div>
             </div>
+
+            <div class="columns" *ngIf="!images?.length">
+              <div class="column is-12">
+                <div class="message">
+                  <div class="columns">
+                    <div class="column is-1">
+                      <i class="ion ion-information"></i>
+                    </div>
+                    <div class="column is-11">
+                      <p><strong>No Docker images built with Abstruse found.</strong></p>
+                      <p>It is important to build images using <a (click)="tab = 'build'">this</a> form so files needed for Abstruse to work are included.</p>
+                      <p>Images built using Abstruse form are later easily upgradeable as config files are stored with the application.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
           </div>
         </div>
 

diff --git a/src/app/components/app-images/app-images.component.ts b/src/app/components/app-images/app-images.component.ts
@@ -92,6 +92,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
     };
 
     this.scrollEvents = new EventEmitter<SlimScrollEvent>();
+    this.images = [];
   }
 
   ngOnInit() {
@@ -128,6 +129,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
           if (output.stream.startsWith('Successfully built') || output.stream.startsWith('Successfully tagged')) {
             this.building = false;
             this.fetchImages();
+            this.tab = 'images';
           } else {
             this.imageBuildLog += this.au.ansi_to_html(output.stream);
             this.scrollToBottom();
@@ -202,7 +204,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
         'RUN sudo apt-get install sqlite3 -y',
         '',
         '# example; install docker',
-        'RUN curl -o /tmp/docker.tgz https://download.docker.com/linux/static/stable/x86_64/docker-17.06.2-ce.tgz \\',
+        'RUN curl -o /tmp/docker.tgz https://download.docker.com/linux/static/stable/x86_64/docker-17.09.0-ce.tgz \\',
         '    && mkdir /tmp/docker && tar xzf /tmp/docker.tgz -C /tmp \\',
         '    && sudo ln -s /tmp/docker/docker /usr/bin/docker && sudo chmod 755 /usr/bin/docker && rm -rf /tmp/docker.tgz',
         '',
@@ -222,7 +224,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
         '',
         '# example for giving docker access to abstruse user',
         'if [ -f /var/run/docker.sock ]; then',
-        '  sudo chown -R 1000:100 /var/run/docker.sock',
+        '  sudo chown -R 1000:100 /var/run/docker.sock > /dev/null 2>&1',
         'fi'
       ].join('\n')
     };
@@ -238,15 +240,20 @@ export class AppImagesComponent implements OnInit, OnDestroy {
   fetchImages(): void {
     this.loading = true;
     this.api.imagesList().subscribe(data => {
-      this.images = data;
-      this.loading = false;
-      if (this.images && this.images.length) {
-        this.tab = 'images';
-      } else {
-        this.tab = 'build';
-      }
-
       this.resetForm();
+      this.images = data.map(image => {
+        if (!image.dockerfile) {
+          image.dockerfile = this.form.dockerfile;
+        }
+
+        if (!image.initsh) {
+          image.initsh = this.form.initsh;
+        }
+
+        return image;
+      });
+
+      this.loading = false;
     });
   }