Permalink
Browse files

feat(images): removeing docker images

  • Loading branch information...
Izak88 authored and jkuri committed Nov 13, 2017
1 parent ebdd61c commit 92504d2d713f492ea4c19688eb51e1170386dfec
@@ -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}`);
@@ -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' });
@@ -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">
@@ -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) {
@@ -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

0 comments on commit 92504d2

Please sign in to comment.