Merge pull request #258 from bwsw/226-network-tab

(closes #226) Move network info to separate tab

src/app/vm/vm-sidebar/color/vm-color.component.html

@@ -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>

src/app/vm/vm-sidebar/color/vm-color.component.scss

@@ -0,0 +1,14 @@
+.color-picker {
+  margin: -20px 0;
+  width: 330px;
+}
+
+mdl-card {
+  z-index: 2;
+}
+
+mdl-card,
+mdl-card-supporting-text
+{
+  overflow: visible;
+}

src/app/vm/vm-sidebar/color/vm-color.component.ts

@@ -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);
+  }
+}

src/app/vm/vm-sidebar/network-detail/firewall-rules/firewall-rules-detail.component.html

@@ -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>

src/app/vm/vm-sidebar/network-detail/firewall-rules/firewall-rules-detail.component.ts

@@ -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' },
+    });
+  }
+}

src/app/vm/vm-sidebar/network-detail/network-detail.component.html

@@ -0,0 +1,6 @@
+<cs-nic-detail [vm]="vm"></cs-nic-detail>
+
+<cs-firewall-rules-detail
+  *ngIf="!disableSecurityGroup"
+  [vm]="vm"
+></cs-firewall-rules-detail>

src/app/vm/vm-sidebar/network-detail/network-detail.component.ts

@@ -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);
+  }
+}

src/app/vm/vm-sidebar/network-detail/nic/nic-detail.component.html

@@ -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>

src/app/vm/vm-sidebar/network-detail/nic/nic-detail.component.scss

@@ -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;
+}

src/app/vm/vm-sidebar/network-detail/nic/nic-detail.component.ts

@@ -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)
+      );
+  }
+}