feat(images): removeing docker images

Author: Izak88

src/api/image-builder.ts

@@ -80,6 +80,37 @@ export function buildDockerImage(data: ImageData): void {
   });
 }
 
+export function deleteImage(data: ImageData): void {
+  let msg: LogMessageType = {
+    message: `starting image delete ${data.name}`,
+    type: 'info',
+    notify: false
+  };
+  logger.next(msg);
+
+  try {
+    docker.getImage(data.name).remove(() => {
+      const folderPath =
+        data.base ? getFilePath(`base-images/${data.name}`) : getFilePath(`images/${data.name}`);
+      fs.remove(folderPath);
+
+      msg = {
+        message: `Image ${data.name} successfully deleted`,
+        type: 'info',
+        notify: false
+      };
+      logger.next(msg);
+    });
+  } catch {
+    msg = {
+      message: `error removeing docker image ${data.name}`,
+      type: 'error',
+      notify: false
+    };
+    logger.next(msg);
+  }
+}
+
 function prepareDirectory(data: ImageData): Promise<void> {
   const folderPath =
     data.base ? getFilePath(`base-images/${data.name}`) : getFilePath(`images/${data.name}`);

src/api/socket.ts

@@ -14,7 +14,7 @@ import {
   stopBuild,
   terminalEvents
 } from './process-manager';
-import { imageBuilderObs, buildDockerImage } from './image-builder';
+import { imageBuilderObs, buildDockerImage, deleteImage } from './image-builder';
 import { getConfig } from './utils';
 import * as https from 'https';
 import * as http from 'http';
@@ -150,6 +150,17 @@ export class SocketServer {
               }
               break;
 
+              case 'deleteImage': {
+                if (this.clients[clientIndex].username === 'anonymous') {
+                  conn.next({ type: 'error', data: 'not authorized' });
+                } else {
+                  conn.next({ type: 'request_received' });
+                  const imageData = event.data;
+                  deleteImage(imageData);
+                }
+              }
+              break;
+
               case 'subscribeToImageBuilder': {
                 if (this.clients[clientIndex].username === 'anonymous') {
                   conn.next({ type: 'error', data: 'not authorized' });

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

@@ -37,6 +37,34 @@ <h1>Docker Build Images</h1>
         <div *ngIf="tab === 'images'">
           <div class="content-box image-builder-box">
 
+            <div class="content-box approve" *ngIf="removeingImage">
+              <div class="columns is-multiline">
+                <div class="column is-12">
+                  <h1>Warning:</h1>
+                </div>
+                <div class="column is-12">
+                    <div class="column is-12">
+                        Are you sure you want to delete image {{form.name}}?
+                    </div>
+                    <div class="column is-12">
+                      This step cannot be revert once delete is performed.
+                    </div>
+                </div>
+                <div class="column is-6">
+                  <button class="button is-fullwidth" name="btn-build" type="button" (click)="startDelete()">
+                    <i class="ionicon ion-checkmark"></i>
+                    <span>Delete</span>
+                  </button>
+                </div>
+                <div class="column is-6">
+                  <button class="button is-fullwidth" name="btn-cancel" type="button" (click)="removeingImage = false">
+                    <i class="ionicon ion-close"></i>
+                    <span>Cancel</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+
             <div class="columns" *ngIf="!baseImages?.length">
               <div class="column is-12">
                 <div class="message">
@@ -61,6 +89,9 @@ <h1>Base Images</h1>
               <div class="columns is-multiline">
                 <div class="column is-3" *ngFor="let i of baseImages; let index = index;">
                   <div class="base-image-item">
+                    <div class="remove-image" *ngIf="baseImages.length > 1">
+                      <i class="ionicon ion-close pointer" (click)="removeImage(index, true)"></i>
+                    </div>
                     <h2>{{ i.name }}</h2>
                     <span class="version">{{ i.version }}</span>
                     <img src="/images/logos/docker.svg" class="docker-img">
@@ -79,6 +110,9 @@ <h1>Custom Images</h1>
               <div class="columns is-multiline">
                 <div class="column is-4" *ngFor="let i of customImages; let index = index;">
                   <div class="image-item">
+                    <div class="remove-image">
+                        <i class="ionicon ion-close pointer" (click)="removeImage(index, false)"></i>
+                    </div>
                     <h2>{{ i.name }}</h2>
                     <span class="version">{{ i.version }}</span>
                     <img src="/images/logos/docker.svg" class="docker-img">

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

@@ -32,6 +32,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
   building: boolean;
   editingImage: boolean;
   success: boolean;
+  removeingImage: boolean;
   baseImages: any[];
   baseImage: string;
   customImages: any[];
@@ -87,6 +88,7 @@ export class AppImagesComponent implements OnInit, OnDestroy {
     this.initEditorOptions = Object.assign({}, this.editorOptions, { language: 'plaintext' });
     this.building = false;
     this.editingImage = false;
+    this.removeingImage = false;
     this.tab = 'images';
 
     this.resetForm(!!this.baseImages.length);
@@ -234,6 +236,16 @@ export class AppImagesComponent implements OnInit, OnDestroy {
 
   editImage(index: number, base: boolean): void {
     this.editingImage = true;
+    this.updateForm(index, base);
+    this.tab = 'build';
+  }
+
+  removeImage(index: number, base: boolean): void {
+    this.removeingImage = true;
+    this.updateForm(index, base);
+  }
+
+  updateForm(index: number, base: boolean): void {
     if (base) {
       this.form.name = this.baseImages[index].name;
       this.form.dockerfile = this.baseImages[index].dockerfile;
@@ -244,7 +256,6 @@ export class AppImagesComponent implements OnInit, OnDestroy {
       this.form.initsh = this.customImages[index].initsh;
     }
     this.form.base = base;
-    this.tab = 'build';
   }
 
   fetchImages(): void {
@@ -342,6 +353,18 @@ export class AppImagesComponent implements OnInit, OnDestroy {
     this.socketService.emit({ type: 'buildImage', data: this.form });
   }
 
+  startDelete(): void {
+    this.removeingImage = false;
+    if (this.form.base) {
+      let index = this.baseImages.findIndex(i => i.name === this.form.name);
+      this.baseImages.splice(index, 1);
+    } else {
+      let index = this.customImages.findIndex(i => i.name === this.form.name);
+      this.customImages.splice(index, 1);
+    }
+    this.socketService.emit({ type: 'deleteImage', data: this.form });
+  }
+
   changeBaseImageSelect(e: Event): void {
     let tmp = this.form.dockerfile.split('\n');
     if (tmp) {

src/app/styles/images.sass

@@ -28,6 +28,14 @@
   border-radius: 4px
   height: 600px
 
+.remove-image
+  position: relative
+
+  .ionicon
+    position: absolute
+    top: 0px
+    right: 0px
+
 .image-builder-box
   background: transparent
   border: none