This repository has been archived by the owner on Mar 25, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
22 changed files
with
558 additions
and
397 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <mdl-card class="vm-card" mdl-shadow="2"> | ||
| <mdl-card-title> | ||
| <h2 mdl-card-title-text>{{ 'COLOR' | translate }}</h2> | ||
| </mdl-card-title> | ||
| <mdl-card-supporting-text> | ||
| <cs-color-picker | ||
| *ngIf="colorList" | ||
| class="color-picker" | ||
| [colors]="colorList" | ||
| [ngModel]="color" | ||
| [disabled]="colorUpdateInProgress" | ||
| (change)="changeColor($event)" | ||
| ></cs-color-picker> | ||
| </mdl-card-supporting-text> | ||
| </mdl-card> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| .color-picker { | ||
| margin: -20px 0; | ||
| width: 330px; | ||
| } | ||
|
|
||
| mdl-card { | ||
| z-index: 2; | ||
| } | ||
|
|
||
| mdl-card, | ||
| mdl-card-supporting-text | ||
| { | ||
| overflow: visible; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core'; | ||
| import { Observable } from 'rxjs/Observable'; | ||
| import { Subject } from 'rxjs/Subject'; | ||
| import { Color } from '../../../shared/models'; | ||
| import { ConfigService } from '../../../shared/services'; | ||
| import { VirtualMachine } from '../../shared/vm.model'; | ||
| import { VmService } from '../../shared/vm.service'; | ||
|
|
||
|
|
||
| @Component({ | ||
| selector: 'cs-vm-color', | ||
| templateUrl: 'vm-color.component.html', | ||
| styleUrls: ['vm-color.component.scss'] | ||
| }) | ||
| export class VmColorComponent implements OnChanges, OnInit, OnDestroy { | ||
| @Input() public vm: VirtualMachine; | ||
|
|
||
| public color: Color; | ||
| public colorList: Array<Color>; | ||
|
|
||
| public colorUpdateInProgress: boolean; | ||
| private colorSubject = new Subject<Color>(); | ||
|
|
||
| constructor( | ||
| private configService: ConfigService, | ||
| private vmService: VmService | ||
| ) {} | ||
|
|
||
| public ngOnInit(): void { | ||
| Observable.forkJoin( | ||
| this.configService.get('themeColors'), | ||
| this.configService.get('vmColors') | ||
| ).subscribe( | ||
| ([themeColors, vmColors]) => this.colorList = themeColors.concat(vmColors) | ||
| ); | ||
|
|
||
| this.colorSubject | ||
| .debounceTime(1000) | ||
| .switchMap(color => { | ||
| this.colorUpdateInProgress = true; | ||
| return this.vmService.setColor(this.vm, color); | ||
| }) | ||
| .subscribe(vm => { | ||
| this.colorUpdateInProgress = false; | ||
| this.vm = vm; | ||
| this.vmService.updateVmInfo(this.vm); | ||
| }, () => this.colorUpdateInProgress = false); | ||
| } | ||
|
|
||
| public ngOnChanges(): void { | ||
| this.color = this.vm.getColor(); | ||
| } | ||
|
|
||
| public ngOnDestroy(): void { | ||
| this.colorSubject.unsubscribe(); | ||
| } | ||
|
|
||
| public changeColor(color: Color): void { | ||
| this.colorSubject.next(color); | ||
| } | ||
| } |
31 changes: 31 additions & 0 deletions
31
src/app/vm/vm-sidebar/network-detail/firewall-rules/firewall-rules-detail.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <mdl-card | ||
| class="vm-card" | ||
| mdl-shadow="2" | ||
| > | ||
| <mdl-card-title> | ||
| <h2 mdl-card-title-text>{{ 'FIREWALL_RULES' | translate }}</h2> | ||
| </mdl-card-title> | ||
| <mdl-card-supporting-text> | ||
| <div class="grid security-group"> | ||
| <div class="row"> | ||
| <div>{{ 'INGRESS' | translate }}</div> | ||
| <div>{{ vm.securityGroup[0]?.ingressRules.length }}</div> | ||
| </div> | ||
| <div class="row"> | ||
| <div>{{ 'EGRESS' | translate}}</div> | ||
| <div>{{ vm.securityGroup[0]?.egressRules.length }}</div> | ||
| </div> | ||
| </div> | ||
| </mdl-card-supporting-text> | ||
| <mdl-card-actions mdl-card-border> | ||
| <button | ||
| [mdl-tooltip]="'EDIT' | translate" | ||
| mdl-tooltip-position="top" | ||
| mdl-button | ||
| mdl-button-type="icon" | ||
| (click)="showRulesDialog(vm.securityGroup[0])" | ||
| > | ||
| <mdl-icon>edit</mdl-icon> | ||
| </button> | ||
| </mdl-card-actions> | ||
| </mdl-card> |
24 changes: 24 additions & 0 deletions
24
src/app/vm/vm-sidebar/network-detail/firewall-rules/firewall-rules-detail.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { Component, Input } from '@angular/core'; | ||
| import { VirtualMachine } from '../../../shared/vm.model'; | ||
| import { DialogService } from '../../../../dialog/dialog-module/dialog.service'; | ||
| import { SgRulesComponent } from '../../../../security-group/sg-rules/sg-rules.component'; | ||
| import { SecurityGroup } from '../../../../security-group/sg.model'; | ||
|
|
||
|
|
||
| @Component({ | ||
| selector: 'cs-firewall-rules-detail', | ||
| templateUrl: 'firewall-rules-detail.component.html' | ||
| }) | ||
| export class FirewallRulesDetailComponent { | ||
| @Input() public vm: VirtualMachine; | ||
|
|
||
| constructor(private dialogService: DialogService) {} | ||
|
|
||
| public showRulesDialog(securityGroup: SecurityGroup): void { | ||
| this.dialogService.showCustomDialog({ | ||
| component: SgRulesComponent, | ||
| providers: [{ provide: 'securityGroup', useValue: securityGroup }], | ||
| styles: { 'width': '880px' }, | ||
| }); | ||
| } | ||
| } |
6 changes: 6 additions & 0 deletions
6
src/app/vm/vm-sidebar/network-detail/network-detail.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <cs-nic-detail [vm]="vm"></cs-nic-detail> | ||
|
|
||
| <cs-firewall-rules-detail | ||
| *ngIf="!disableSecurityGroup" | ||
| [vm]="vm" | ||
| ></cs-firewall-rules-detail> |
25 changes: 25 additions & 0 deletions
25
src/app/vm/vm-sidebar/network-detail/network-detail.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { Component, Input, OnChanges } from '@angular/core'; | ||
| import { ZoneService } from '../../../shared/services'; | ||
| import { VirtualMachine } from '../../shared/vm.model'; | ||
|
|
||
|
|
||
| @Component({ | ||
| selector: 'cs-network-detail', | ||
| templateUrl: 'network-detail.component.html' | ||
| }) | ||
| export class NetworkDetailComponent implements OnChanges { | ||
| @Input() public vm: VirtualMachine; | ||
|
|
||
| public disableSecurityGroup: boolean; | ||
|
|
||
| constructor(private zoneService: ZoneService) {} | ||
|
|
||
| public ngOnChanges(): void { | ||
| this.checkSecurityGroupDisabled(); | ||
| } | ||
|
|
||
| private checkSecurityGroupDisabled(): void { | ||
| this.zoneService.get(this.vm.zoneId) | ||
| .subscribe(zone => this.disableSecurityGroup = zone.networkTypeIsBasic); | ||
| } | ||
| } |
83 changes: 83 additions & 0 deletions
83
src/app/vm/vm-sidebar/network-detail/nic/nic-detail.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <mdl-card class="vm-card" mdl-shadow="2"> | ||
| <mdl-card-title> | ||
| <h2 mdl-card-title-text>{{ 'NETWORK_CONFIGURATION' | translate }}</h2> | ||
| </mdl-card-title> | ||
| <mdl-card-supporting-text> | ||
| <div class="collapsed-panel grid nic" *ngIf="!expandNIC"> | ||
| <div class="row" *ngFor="let nic of vm.nic; let i = index"> | ||
| <div> | ||
| {{ 'NIC' | translate }} {{ i+1 }} | ||
| </div> | ||
| <div> | ||
| {{ nic.ipAddress }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="expanded-panel grid nic" *ngIf="expandNIC"> | ||
| <div *ngFor="let nic of vm.nic; let i = index"> | ||
| <div class="nic-name">{{ 'NIC' | translate }} {{i+1}}</div> | ||
| <div class="row"> | ||
| <div>{{ 'NIC_FIELDS.macAddress' | translate }}</div> | ||
| <div>{{ nic.macAddress }}</div> | ||
| </div> | ||
| <div class="row"> | ||
| <div>{{ 'NIC_FIELDS.ipAddress' | translate }}</div> | ||
| <div>{{ nic.ipAddress }}</div> | ||
| </div> | ||
| <div class="row"> | ||
| <div>{{ 'NIC_FIELDS.netmask' | translate }}</div> | ||
| <div>{{ nic.netmask }}</div> | ||
| </div> | ||
| <div class="row"> | ||
| <div>{{ 'NIC_FIELDS.gateway' | translate }}</div> | ||
| <div>{{ nic.gateway }}</div> | ||
| </div> | ||
| <div class="row"> | ||
| <div>{{ 'NIC_FIELDS.type' | translate }}</div> | ||
| <div>{{ nic.type }}</div> | ||
| </div> | ||
| <ng-container> | ||
| <div class="row"> | ||
| <div>{{ 'NIC_FIELDS.secondaryIp' | translate }}</div> | ||
| <div> | ||
| <button | ||
| mdl-button | ||
| mdl-button-type="icon" | ||
| class="mdl-icon-button--small" | ||
| (click)="confirmAddSecondaryIp(vm)" | ||
| > | ||
| <mdl-icon class="mdl-icon--small">add</mdl-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div class="secondary-ips"> | ||
| <div class="row" *ngFor="let ip of nic.secondaryIp"> | ||
| <div>{{ ip.ipaddress }}</div> | ||
| <div> | ||
| <button | ||
| mdl-button | ||
| mdl-button-type="icon" | ||
| class="mdl-icon-button--small" | ||
| (click)="confirmRemoveSecondaryIp(ip.id, vm)" | ||
| > | ||
| <mdl-icon class="mdl-icon--small">delete</mdl-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ng-container> | ||
| </div> | ||
| </div> | ||
| </mdl-card-supporting-text> | ||
| <mdl-card-actions mdl-card-border style="text-align: right;"> | ||
| <button | ||
| mdl-button | ||
| mdl-ripple | ||
| mdl-button-type="icon" | ||
| (click)="toggleNIC()" | ||
| [class.open]="expandNIC" | ||
| > | ||
| <mdl-icon>keyboard_arrow_down</mdl-icon> | ||
| </button> | ||
| </mdl-card-actions> | ||
| </mdl-card> |
13 changes: 13 additions & 0 deletions
13
src/app/vm/vm-sidebar/network-detail/nic/nic-detail.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| .nic-name { | ||
| font-weight: bolder; | ||
| padding: 2px; | ||
| } | ||
|
|
||
| .secondary-ips { | ||
| margin-left: 5%; | ||
| } | ||
|
|
||
| .nic .row > div:nth-child(2n) | ||
| { | ||
| text-align: right; | ||
| } |
58 changes: 58 additions & 0 deletions
58
src/app/vm/vm-sidebar/network-detail/nic/nic-detail.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { Component, Input } from '@angular/core'; | ||
| import { VirtualMachine } from '../../../shared/vm.model'; | ||
| import { DialogService } from '../../../../dialog/dialog-module/dialog.service'; | ||
| import { VmService } from '../../../shared/vm.service'; | ||
|
|
||
|
|
||
| @Component({ | ||
| selector: 'cs-nic-detail', | ||
| templateUrl: 'nic-detail.component.html', | ||
| styleUrls: ['nic-detail.component.scss'] | ||
| }) | ||
| export class NicDetailComponent { | ||
| @Input() public vm: VirtualMachine; | ||
|
|
||
| public expandNIC = false; | ||
|
|
||
| constructor( | ||
| private dialogService: DialogService, | ||
| private vmService: VmService | ||
| ) {} | ||
|
|
||
| public toggleNIC(): void { | ||
| this.expandNIC = !this.expandNIC; | ||
| } | ||
|
|
||
| public confirmAddSecondaryIp(vm: VirtualMachine): void { | ||
| this.dialogService.confirm('ARE_YOU_SURE_ADD_SECONDARY_IP', 'NO', 'YES') | ||
| .onErrorResumeNext() | ||
| .subscribe(() => this.addSecondaryIp(vm)); | ||
| } | ||
|
|
||
| public confirmRemoveSecondaryIp(secondaryIpId: string, vm: VirtualMachine): void { | ||
| this.dialogService.confirm('ARE_YOU_SURE_REMOVE_SECONDARY_IP', 'NO', 'YES') | ||
| .onErrorResumeNext() | ||
| .subscribe(() => this.removeSecondaryIp(secondaryIpId, vm)); | ||
| } | ||
|
|
||
| private addSecondaryIp(vm: VirtualMachine): void { | ||
| this.vmService.addIpToNic(vm.nic[0].id) | ||
| .subscribe( | ||
| res => { | ||
| const ip = res.result.nicsecondaryip; | ||
| vm.nic[0].secondaryIp.push(ip); | ||
| }, | ||
| err => this.dialogService.alert(err.errortext) | ||
| ); | ||
| } | ||
|
|
||
| private removeSecondaryIp(secondaryIpId: string, vm: VirtualMachine): void { | ||
| this.vmService.removeIpFromNic(secondaryIpId) | ||
| .subscribe( | ||
| () => { | ||
| vm.nic[0].secondaryIp = vm.nic[0].secondaryIp.filter(ip => ip.id !== secondaryIpId); | ||
| }, | ||
| err => this.dialogService.alert(err.errortext) | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.