fix(images): keep image configurations if build fails (closes #316)

Author: Izak88

src/api/image-builder.ts

@@ -43,7 +43,18 @@ export function buildDockerImage(data: ImageData): void {
     docker.buildImage({ context: folderPath, src: src }, { t: data.name })
       .then(output => {
         output.on('data', d => {
-          imageBuilder.next({ name: data.name, output: d.toString() });
+          const output = d.toString();
+          const parsed = JSON.parse(output);
+
+          if (parsed && parsed.errorDetail) {
+            const error = parsed.errorDetail.error ? `(${parsed.errorDetail.error})` : '';
+            imageBuilder.next({
+              name: data.name,
+              output: `error while building image ${data.name} ${error}`
+            });
+          } else {
+            imageBuilder.next({ name: data.name, output: output });
+          }
         });
         output.on('finish', () => {
           msg = {
@@ -59,6 +70,7 @@ export function buildDockerImage(data: ImageData): void {
             type: 'error',
             notify: true
           };
+          imageBuilder.next({ name: data.name, output: msg.message });
           logger.next(msg);
         });
         output.on('end', () => {
@@ -77,6 +89,7 @@ export function buildDockerImage(data: ImageData): void {
           notify: true
         };
         logger.next(msg);
+        imageBuilder.next({ name: data.name, output: msg.message });
       });
   });
 }

src/app/components/app-images/app-images.component.html

@@ -159,6 +159,14 @@ <h1>Warning:</h1>
                     </div>
                   </div>
                 </div>
+                <div class="columns is-multiline error-item" *ngIf="buildingError">
+                  <div class="column is-12">
+                    Error (check your build configurations):
+                  </div>
+                  <div class="column is-12">
+                    {{buildingError}}
+                  </div>
+                </div>
                 <h2>Image name</h2>
                 <input type="text" class="image-name-input" [(ngModel)]="form.name" placeholder="Image Name">
                 <div class="columns is-multiline" *ngIf="baseImages?.length && !editingImage">

src/app/components/app-images/app-images.component.ts

@@ -39,6 +39,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
   tab: string;
   sub: Subscription;
   approve: boolean;
+  buildingError: string;
   terminalOptions:  { size: 'small' | 'large', newline: boolean };
   terminalInput: any;
   baseImageOptions: { key: any, value: string }[];
@@ -53,6 +54,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
   ) {
     this.baseImages = [];
     this.baseImage = '';
+    this.buildingError = '';
     this.customImages = [];
     this.baseImageOptions = [];
     this.dangerousCommands = [];
@@ -135,7 +137,10 @@ export class AppImagesComponent implements OnInit, OnDestroy {
             this.zone.run(() => this.terminalInput = output.stream);
           }
         } else if (output && output.errorDetail) {
-          this.zone.run(() => this.terminalInput = `<span style="color:rgb(255,85,85);">${output.errorDetail.message}</span>`);
+          this.zone.run(() => this.terminalInput = output.errorDetail.message);
+        } else if (event.data.output && event.data.output.startsWith('error while building image')) {
+          this.building = false;
+          this.buildingError = event.data.output;
         }
       });
 
@@ -144,6 +149,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
   }
 
   resetForm(imageType: boolean): void {
+    this.buildingError = '';
     this.editingImage = false;
 
     if (imageType) {
@@ -257,6 +263,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
       this.form.initsh = this.customImages[index].initsh;
     }
     this.form.base = base;
+    this.buildingError = '';
   }
 
   fetchImages(): void {
@@ -325,6 +332,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
   }
 
   buildImage(): void {
+    this.buildingError = '';
     if (this.checkImage()) {
       this.approve = true;
       window.scrollTo(0, 0);

src/app/styles/images.sass

@@ -162,3 +162,14 @@
     align-items: center
     justify-content: center
     text-align: center
+
+.error-item
+  margin: 10px 0px
+  font-size: 14px
+  border: 1px solid $red
+  background: rgba($red-secondary, 0.4)
+  font-weight: $weight-semibold
+  color: darken($red, 10)
+  align-items: center
+  justify-content: center
+  text-align: center