Skip to content

Commit

Permalink
fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@dweinholz
dweinholz committed Dec 7, 2018
1 parent de0bb83 commit 01c0085
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 51 deletions.
9 changes: 9 additions & 0 deletions src/app/shared_modules/baseClass/abstract-base-class.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,12 +94,21 @@ export abstract class AbstractBaseClasse {
}
}

public setCollapseStatus(id:string,status:boolean):void{

this.collapse_status[id] = status;

}



/**
* Switch status of collapse.
* @param {string} id
*/
public switchCollapseStatus(id: string) {
this.collapse_status[id] = !this.getCollapseStatus(id);
console.log(this.collapse_status[id])
}


Expand Down
9 changes: 5 additions & 4 deletions src/app/virtualmachines/vmOverview.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,20 +133,21 @@
</td>

<td>
<div (clickOutside)="closeCollapse(vm.openstackid);"
<div (clickOutside)="setCollapseStatus(vm.openstackid,false)"
*ngIf="vm.status !=vm_statuses[vm_statuses.DELETED]"
class="btn-group {{collapse_status[vm.openstackid]}}">
[ngClass]="getCollapseStatus(vm.openstackid) ? 'btn-group open': 'btn-group'"
>

<button class="btn btn-secondary" type="button"
*ngIf="vm.status !=vm_statuses[vm_statuses.DELETED]"
(click)="snapshot_vm=vm;resetSnapshotResult();snapshotModal.show();">

Create Snapshot
</button>
<button class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
<button class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"
type="button" aria-haspopup="true" aria-expanded="false"
(click)="getCollapseStatus(vm.openstackid)"></button>
(click)="switchCollapseStatus(vm.openstackid)"></button>
<ul class="dropdown-menu " role="menu">
<li role="menuitem"
*ngIf="vm.status ==vm_statuses[vm_statuses.ACTIVE]">
Expand Down
6 changes: 5 additions & 1 deletion src/app/virtualmachines/vmOverview.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ export class VmOverviewComponent extends FilterBaseClass implements OnInit {
}



toggleTab(tabString: string) {
this.tab = tabString;
}
Expand Down Expand Up @@ -249,7 +248,10 @@ export class VmOverviewComponent extends FilterBaseClass implements OnInit {
getVms(elixir_id: string): void {
this.virtualmachineservice.getVmsFromLoggedInUser().subscribe(vms => {
this.vms_content = vms;

for (let vm of this.vms_content) {
this.setCollapseStatus(vm.openstackid, false)

if (vm.created_at != '') {
vm.created_at = new Date(parseInt(vm.created_at) * 1000).toLocaleDateString();
}
Expand Down Expand Up @@ -300,6 +302,8 @@ export class VmOverviewComponent extends FilterBaseClass implements OnInit {
this.virtualmachineservice.getAllVM().subscribe(vms => {
this.vms_content = vms;
for (let vm of this.vms_content) {
this.setCollapseStatus(vm.openstackid, false)


if (vm.created_at != '') {
vm.created_at = new Date(parseInt(vm.created_at) * 1000).toLocaleDateString();
Expand Down
72 changes: 48 additions & 24 deletions src/app/virtualmachines/volumeOverview.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div *ngIf="isLoaded==false" class="loader"></div>
<div *ngIf="isLoaded">
<button type="button" style="margin-bottom: 5px" class="btn btn-secondary"
(click)="selectedProject = undefined;selected_vm=undefined; createModal.show();">Create & Attach Volume
(click)="selectedProject = undefined;selected_vm=undefined; createModal.show();">Create
& Attach Volume
</button>
</div>

Expand Down Expand Up @@ -30,13 +31,16 @@
<tbody>
<tr *ngFor="let volume of volumes">
<td>{{volume.volume_project}}</td>
<td *ngIf="volume.volume_virtualmachine">{{volume.volume_virtualmachine.name}}</td>
<td *ngIf="volume.volume_virtualmachine">
{{volume.volume_virtualmachine.name}}
</td>
<td *ngIf="!volume.volume_virtualmachine"></td>
<td>{{volume.volume_name}}</td>
<td>{{volume.volume_size }} GB</td>
<td>
<div (clickOutside)="closeCollapse(volume.volume_openstackid)"
class="btn-group {{collapse_status[volume.volume_openstackid]}}">
<div
(clickOutside)="setCollapseStatus(volume.volume_openstackid,false)"
[ngClass]="getCollapseStatus(volume.volume_openstackid) ? 'btn-group open': 'btn-group'">
<button class="btn btn-secondary"
(click)="setRequestStatus(0);setSelectedVolume(volume);verifyModal.show();"
type="button">Delete Volume
Expand Down Expand Up @@ -82,19 +86,22 @@
</div>
</div>

<div bsModal #resultModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
<div bsModal #resultModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="Label"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" *ngIf="volume_status == 0 || volume_status == 3 || volume_status == 5">
<h4 class="modal-title"
*ngIf="volume_status == 0 || volume_status == 3 || volume_status == 5">
Waiting </h4>
<h4 class="modal-title"
*ngIf="volume_status == 1 || volume_status == 4 || volume_status == 6 || volume_status == 8">
Success </h4>
<h4 class="modal-title" *ngIf="volume_status == 2"> Error </h4>

<button type="button" class="close" style="cursor:pointer" (click)="resultModal.hide()"
<button type="button" class="close" style="cursor:pointer"
(click)="resultModal.hide()"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
Expand All @@ -110,7 +117,8 @@ <h4 class="modal-title" *ngIf="volume_status == 2"> Error </h4>
</div>

<div class="alert alert-info" role="alert" *ngIf="volume_status == 5">
Attaching Volume {{selected_volume?.volume_name}} to Virtualmachine {{selected_vm.name}}...
Attaching Volume {{selected_volume?.volume_name}} to Virtualmachine
{{selected_vm.name}}...
<i class="fa fa-spinner fa-spin"
style="font-size:24px"></i>
</div>
Expand Down Expand Up @@ -142,21 +150,24 @@ <h4 class="modal-title" *ngIf="volume_status == 2"> Error </h4>


<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="volume_status = 0;resultModal.hide()">Close
<button type="button" class="btn btn-secondary"
(click)="volume_status = 0;resultModal.hide()">Close
</button>
</div>

</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div bsModal #verifyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
<div bsModal #verifyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="Label"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Volume</h4>
<button type="button" class="close" style="cursor:pointer" (click)="verifyModal.hide()"
<button type="button" class="close" style="cursor:pointer"
(click)="verifyModal.hide()"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
Expand Down Expand Up @@ -191,13 +202,15 @@ <h4 class="modal-title">Delete Volume</h4>
</div><!-- /.modal -->


<div bsModal #attachModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
<div bsModal #attachModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="Label"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Attach Volume</h4>
<button type="button" class="close" style="cursor: pointer" (click)="attachModal.hide()"
<button type="button" class="close" style="cursor: pointer"
(click)="attachModal.hide()"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
Expand Down Expand Up @@ -231,13 +244,15 @@ <h4 class="modal-title">Attach Volume</h4>
</div><!-- /.modal -->


<div bsModal #renameModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
<div bsModal #renameModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="Label"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Rename Volume</h4>
<button type="button" class="close" style="cursor:pointer" (click)="renameModal.hide()"
<button type="button" class="close" style="cursor:pointer"
(click)="renameModal.hide()"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
Expand All @@ -260,20 +275,23 @@ <h4 class="modal-title">Rename Volume</h4>
</button>

<button class="btn btn-danger col-md-4" type="reset"
(click)="selected_volume=undefined;newName.value='';renameModal.hide();">Cancel
(click)="selected_volume=undefined;newName.value='';renameModal.hide();">
Cancel
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div bsModal #createModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
<div bsModal #createModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="Label"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Create & Attach Volume</h4>
<button type="button" class="close" style="cursor: pointer" (click)="createModal.hide()"
<button type="button" class="close" style="cursor: pointer"
(click)="createModal.hide()"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
Expand All @@ -282,7 +300,8 @@ <h4 class="modal-title">Create & Attach Volume</h4>
<div class="form-group row">


<label class="col-md-12"> <strong>For which Project the Volume should be created?</strong></label>
<label class="col-md-12"> <strong>For which Project the Volume should be
created?</strong></label>

</div>

Expand All @@ -293,8 +312,10 @@ <h4 class="modal-title">Create & Attach Volume</h4>
<select class="form-control"
name="selectedProject" [(ngModel)]="selectedProject"
(ngModelChange)="getActiveVmsByProject(selectedProject[1]);getSelectedProjectDiskspace();getSelectedProjectVolumes();">
<option value="undefined" disabled selected hidden> Please Select</option>
<option *ngFor="let project of projects" [ngValue]="project"> {{project[0]}}
<option value="undefined" disabled selected hidden> Please Select
</option>
<option *ngFor="let project of projects" [ngValue]="project">
{{project[0]}}
</option>

</select>
Expand Down Expand Up @@ -337,7 +358,8 @@ <h4 class="modal-title">Create & Attach Volume</h4>
*ngIf="selectedProject && !(selectedProjectVolumesUsed == selectedProjectVolumesMax || selectedProjectDiskspaceUsed == selectedProjectDiskspaceMax)">


<label class="col-md-12"><strong>To which Vm the Volume should be attached?</strong></label>
<label class="col-md-12"><strong>To which Vm the Volume should be
attached?</strong></label>
</div>
<div *ngIf="selectedProject && !(selectedProjectVolumesUsed == selectedProjectVolumesMax || selectedProjectDiskspaceUsed == selectedProjectDiskspaceMax)"
class="form-group row">
Expand All @@ -346,7 +368,8 @@ <h4 class="modal-title">Create & Attach Volume</h4>
<div class="col-md-9">
<select class="form-control col-md-6" name="selected_vm"
[(ngModel)]="selected_vm">
<option value="undefined" disabled selected hidden> Please Select</option>
<option value="undefined" disabled selected hidden> Please Select
</option>
<option *ngFor="let vm of project_vms" [ngValue]="vm"> {{vm.name}}
</option>

Expand All @@ -373,7 +396,8 @@ <h4 class="modal-title">Create & Attach Volume</h4>
<div class="col-md-9">
<div class="input-group">
<input min="0" step="1" [value]="diskspace"
(input)="diskspace = $event.target.value;calcDiskSpaceSum();" type="number" placeholder="e.g 8 "><span
(input)="diskspace = $event.target.value;calcDiskSpaceSum();"
type="number" placeholder="e.g 8 "><span
class="input-group-addon"> GB
</span>

Expand Down
25 changes: 3 additions & 22 deletions src/app/virtualmachines/volumeOverview.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {Volume} from "./virtualmachinemodels/volume";
import {VirtualmachineService} from "../api-connector/virtualmachine.service";
import {VirtualMachine} from "./virtualmachinemodels/virtualmachine";
import {GroupService} from "../api-connector/group.service";
import {AbstractBaseClasse} from "../shared_modules/baseClass/abstract-base-class";


@Component({
Expand All @@ -12,11 +13,10 @@ import {GroupService} from "../api-connector/group.service";
providers: [GroupService, VirtualmachineService]
})

export class VolumeOverviewComponent implements OnInit {
export class VolumeOverviewComponent extends AbstractBaseClasse implements OnInit {
volumes: Volume[];
project_vms: VirtualMachine[];
selected_vm: VirtualMachine;
collapse_status: { [id: string]: string } = {};
isLoaded = false;
selected_volume: Volume;
selectedProjectDiskspaceMax: number;
Expand All @@ -36,7 +36,7 @@ export class VolumeOverviewComponent implements OnInit {
request_status: number; // 0=Delete ,1 =Detach


constructor(private groupService: GroupService, private vmService: VirtualmachineService) {
constructor(private groupService: GroupService, private vmService: VirtualmachineService) {super();

}

Expand All @@ -48,25 +48,6 @@ export class VolumeOverviewComponent implements OnInit {
this.selected_volume = volume;
}

public getCollapseStatus(id: string) {
if (id in this.collapse_status) {
this.switchCollapseStatus(id);
} else {
this.collapse_status[id] = 'open';
}
}

public closeCollapse(id: string) {
this.collapse_status[id] = '';


}


public switchCollapseStatus(id: string) {
this.collapse_status[id] == '' ? this.collapse_status[id] = 'open' : this.collapse_status[id] = '';
}


getVolumes() {
this.vmService.getVolumesByUser().subscribe(result => {
Expand Down

0 comments on commit 01c0085

Please sign in to comment.