Qemu image configurator added

src/app/app.module.ts

@@ -234,6 +234,7 @@ import { TracengPreferencesComponent } from './components/preferences/traceng/tr
 import { TracengTemplatesComponent } from './components/preferences/traceng/traceng-templates/traceng-templates.component';
 import { TracengService } from './services/traceng.service';
 import { TracengTemplateDetailsComponent } from './components/preferences/traceng/traceng-template-details/traceng-template-details.component';
+import { QemuImageCreatorComponent } from './components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -394,7 +395,8 @@ if (environment.production) {
     AddTracengTemplateComponent,
     TracengPreferencesComponent,
     TracengTemplatesComponent,
-    TracengTemplateDetailsComponent
+    TracengTemplateDetailsComponent,
+    QemuImageCreatorComponent
   ],
   imports: [
     BrowserModule,
@@ -509,7 +511,8 @@ if (environment.production) {
     ConfiguratorDialogIosComponent,
     ConfiguratorDialogDockerComponent,
     ConfiguratorDialogNatComponent,
-    ConfiguratorDialogTracengComponent
+    ConfiguratorDialogTracengComponent,
+    QemuImageCreatorComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/project-map/node-editors/configurator/configurator.component.scss

@@ -30,6 +30,10 @@
     display: none;
 }
 
+mat-radio-button {
+    margin-right: 10px;
+}
+
 ::-webkit-scrollbar {
     width: 0.5em;
 }

src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.html

@@ -51,6 +51,8 @@
                     </mat-tab>
                     <mat-tab label="HDD">
                         <mat-card>
+                            <!-- to do -->
+                            <button mat-raised-button color="primary" (click)="openQemuImageCreator()" class="file-button">Create Qemu image</button>
                             <mat-card-title></mat-card-title>
                             <mat-card-subtitle>
                                 HDA (Primary Master)

src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts

@@ -4,11 +4,12 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef, MatDialog } from '@angular/material';
 import { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';
 import { QemuService } from '../../../../../services/qemu.service';
 import { QemuConfigurationService } from '../../../../../services/qemu-configuration.service';
 import { QemuBinary } from '../../../../../models/qemu/qemu-binary';
+import { QemuImageCreatorComponent } from './qemu-image-creator/qemu-image-creator.component';
 
 
 @Component({
@@ -30,9 +31,16 @@ export class ConfiguratorDialogQemuComponent implements OnInit {
     displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
     networkTypes = [];
 
+    private conf = {
+        autoFocus: false,
+        width: '800px'
+    };
+    dialogRefQemuImageCreator;
+
     @ViewChild("customAdapters", {static: false}) customAdapters: CustomAdaptersTableComponent;
 
     constructor(
+        private dialog: MatDialog,
         public dialogRef: MatDialogRef<ConfiguratorDialogQemuComponent>,
         public nodeService: NodeService,
         private toasterService: ToasterService,
@@ -58,6 +66,12 @@ export class ConfiguratorDialogQemuComponent implements OnInit {
         });
     }
 
+    openQemuImageCreator() {
+        this.dialogRefQemuImageCreator = this.dialog.open(QemuImageCreatorComponent, this.conf);
+        let instance = this.dialogRefQemuImageCreator.componentInstance;
+        instance.server = this.server;
+    }
+
     uploadCdromImageFile(event){
         this.node.properties.cdrom_image = event.target.files[0].name;
     }

src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.html

@@ -0,0 +1,107 @@
+<h1 mat-dialog-title>Qemu image configurator</h1>
+
+<div class="modal-form-container">
+    <div class="content">
+        <div class="default-content">
+            <mat-card class="matCard">
+                <form [formGroup]="inputForm">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="text" 
+                            [(ngModel)]="qemuImg.qemu_img" 
+                            formControlName="qemu_img"
+                            placeholder="Qemu image path">
+                    </mat-form-field>
+                </form>
+                <mat-form-field class="form-field">
+                    <mat-select placeholder="Image format" [(ngModel)]="qemuImg.format">
+                        <mat-option *ngFor="let format of formatOptions" [value]="format">
+                            {{format}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <div *ngIf="qemuImg.format==='qcow2'">
+                    Size options
+                    <mat-form-field class="form-field">
+                        <mat-select placeholder="Image format" [(ngModel)]="qemuImg.preallocation">
+                            <mat-option *ngFor="let preallocation of preallocationsOptions" [value]="preallocation">
+                                {{preallocation}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field class="form-field">
+                        <mat-select placeholder="Cluster size" [(ngModel)]="qemuImg.cluster_size">
+                            <mat-option *ngFor="let clusterSize of clusterSizeOptions" [value]="clusterSize.value">
+                                {{clusterSize.name}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    Refcounts
+                    <mat-form-field class="form-field">
+                        <mat-select placeholder="Lazy refcounts" [(ngModel)]="qemuImg.lazy_refcounts">
+                            <mat-option *ngFor="let lazyRefcount of lazyRefcountsOptions" [value]="lazyRefcount">
+                                {{lazyRefcount}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field class="form-field">
+                        <mat-select placeholder="Refcount entry size" [(ngModel)]="qemuImg.refcount_bits">
+                            <mat-option *ngFor="let clusterSize of clusterSizeOptions" [value]="clusterSize.value">
+                                {{clusterSize.name}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+                <div *ngIf="qemuImg.format==='vhd' || qemuImg.format==='vdi'">
+                    <mat-radio-group aria-label="Image file sizing mode" class="radio-selection">
+                        <mat-radio-button value="1" (click)="setSubformat('dynamic')" checked>Dynamic</mat-radio-button>
+                        <mat-radio-button value="2" (click)="setSubformat('fixed')">Fixed</mat-radio-button>
+                    </mat-radio-group>
+                </div>
+                <div *ngIf="qemuImg.format==='vmdk'">
+                    Adapter type<br/>
+                    <mat-radio-group aria-label="Adapter type" class="radio-selection">
+                        <mat-radio-button value="1" (click)="setAdapterType('ide')" checked>IDE</mat-radio-button>
+                        <mat-radio-button value="2" (click)="setAdapterType('lsilogic')">LSI Logic</mat-radio-button>
+                        <mat-radio-button value="3" (click)="setAdapterType('buslogic')">BusLogic</mat-radio-button>
+                        <mat-radio-button value="4" (click)="setAdapterType('legacyESX')">Legacy (ESX)</mat-radio-button>
+                    </mat-radio-group><br/><br/>
+                    Image file sizing mode<br/>
+                    <mat-radio-group aria-label="Image file sizing mode" class="radio-selection">
+                        <mat-radio-button value="1" (click)="setSubformat('streamOptimized')" checked>Stream optimized</mat-radio-button>
+                        <mat-radio-button value="2" (click)="setSubformat('twoGbMaxExtentSparse')">Split every 2GB (sparse)</mat-radio-button>
+                        <mat-radio-button value="3" (click)="setSubformat('twoGbMaxExtentFlat')">Split every 2GB (flat)</mat-radio-button>
+                        <mat-radio-button value="4" (click)="setSubformat('monolithicSparse')">Monolithic sparse</mat-radio-button>
+                        <mat-radio-button value="5" (click)="setSubformat('monolithicFlat')">Monolithic flat</mat-radio-button>
+                    </mat-radio-group><br/><br/>
+                    <mat-select placeholder="Zeroed grain" [(ngModel)]="qemuImg.zeroed_grain">
+                        <mat-option *ngFor="let option of zeroedGrainOptions" [value]="option">
+                            {{option}}
+                        </mat-option>
+                    </mat-select>
+                </div>
+                <form [formGroup]="inputForm">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="text" 
+                            [(ngModel)]="qemuImg.path" 
+                            formControlName="path"
+                            placeholder="File location">
+                    </mat-form-field>
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="qemuImg.size" 
+                            formControlName="size"
+                            placeholder="Disk size">
+                    </mat-form-field>
+                </form>
+            </mat-card>
+        </div>
+    </div>
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
+  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+</div>

src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.ts

@@ -0,0 +1,121 @@
+import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { Server } from '../../../../../../models/server';
+import { NodeService } from '../../../../../../services/node.service';
+import { ToasterService } from '../../../../../../services/toaster.service';
+import { MatDialogRef } from '@angular/material';
+import { QemuService } from '../../../../../../services/qemu.service';
+import { QemuImg } from '../../../../../../models/qemu/qemu-img';
+
+
+@Component({
+    selector: 'app-qemu-image-creator',
+    templateUrl: './qemu-image-creator.component.html',
+    styleUrls: ['../../configurator.component.scss']
+})
+export class QemuImageCreatorComponent implements OnInit {
+    server: Server;
+    qemuImg: QemuImg;
+
+    formatOptions: string[] = ['qcow2', 'qcow', 'vhd', 'vdi', 'vmdk', 'raw'];
+    preallocationsOptions: string[] = ['off', 'metadata', 'falloc', 'full'];
+    clusterSizeOptions: ClusterSize[] = [
+        {
+            name: '512',
+            value: 512
+        },
+        {
+            name: '1k',
+            value: 1024
+        },
+        {
+            name: '2k',
+            value: 2048
+        },
+        {
+            name: '4k',
+            value: 4096
+        },
+        {
+            name: '8k',
+            value: 8192
+        },
+        {
+            name: '16k',
+            value: 16384
+        },
+        {
+            name: '32k',
+            value: 32768
+        },
+        {
+            name: '64k',
+            value: 65536
+        },
+        {
+            name: '128k',
+            value: 131072
+        },
+        {
+            name: '256k',
+            value: 262144
+        },
+        {
+            name: '512k',
+            value: 524288
+        },
+        {
+            name: '1024k',
+            value: 1048576
+        },
+        {
+            name: '2048k',
+            value: 2097152
+        }
+    ];
+    lazyRefcountsOptions: string[] = ['off', 'on'];
+    refcountBitsOptions: number[] = [1,2,4,8,16,32,64];
+    zeroedGrainOptions: string[] = ['on', 'off'];
+    inputForm: FormGroup;
+
+    constructor(
+        public dialogRef: MatDialogRef<QemuImageCreatorComponent>,
+        public nodeService: NodeService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder,
+        private qemuService: QemuService
+    ) {
+        this.inputForm = this.formBuilder.group({
+            qemu_img: new FormControl('', Validators.required),
+            path: new FormControl('', Validators.required),
+            size: new FormControl('', Validators.required)
+        });
+    }
+
+    ngOnInit() {
+        this.qemuImg = {} as QemuImg;
+    }
+
+    setSubformat(subformat: string) {
+        this.qemuImg.subformat = subformat;
+    }
+
+    onSaveClick() {
+        if (this.inputForm.valid && this.qemuImg.format) {
+            this.qemuService.addImage(this.server, this.qemuImg).subscribe(() => {
+                this.dialogRef.close();
+            });
+        } else {
+            this.toasterService.error('Fill all required fields.')
+        }
+    }
+
+    onCancelClick() {
+        this.dialogRef.close();
+    }
+}
+
+export interface ClusterSize {
+    name: string;
+    value: number;
+}

src/app/models/qemu/qemu-img.ts

@@ -0,0 +1,12 @@
+export class QemuImg {
+    cluster_size: number;
+    format: string;
+    lazy_refcounts: string;
+    path: string;
+    preallocation: string;
+    qemu_img: string;
+    refcount_bits: number;
+    size: number;
+    subformat: string;
+    zeroed_grain: string;
+}

src/app/services/qemu.service.ts

@@ -5,6 +5,7 @@ import { QemuTemplate } from '../models/templates/qemu-template';
 import { Server } from '../models/server';
 import { QemuBinary } from '../models/qemu/qemu-binary';
 import { QemuImage } from '../models/qemu/qemu-image';
+import { QemuImg } from '../models/qemu/qemu-img';
 
 @Injectable()
 export class QemuService {
@@ -26,6 +27,10 @@ export class QemuService {
         return this.httpServer.get<QemuImage[]>(server, '/compute/qemu/images') as Observable<QemuImage[]>;
     }
 
+    addImage(server: Server, qemuImg: QemuImg): Observable<QemuImg> {
+        return this.httpServer.post<QemuImg>(server, '/compute/qemu/img', qemuImg) as Observable<QemuImg>;
+    }
+ 
     addTemplate(server: Server, qemuTemplate: QemuTemplate): Observable<QemuTemplate> {
         return this.httpServer.post<QemuTemplate>(server, `/templates`, qemuTemplate) as Observable<QemuTemplate>;
     }