feat(vm-creation): Improve shared SGs - Support assigning of many gro…

src/app/vm/vm-creation/components/security-group-rules-manager/security-group-manager-existing-group/security-group-manager-existing-group.component.html

@@ -1,3 +1,8 @@
 <div class="mat-input-wrapper template-list">
-  <span class="ellipsis-overflow">{{ securityGroup?.name }}</span>
+  <span class="ellipsis-overflow" [matTooltip]="securityGroupsLine" *ngIf="securityGroups?.length; else noSG">
+    {{ securityGroupsLine }}
+  </span>
+  <ng-template #noSG>
+    {{ 'COMMON.NONE' | translate }}
+  </ng-template>
 </div>

src/app/vm/vm-creation/components/security-group-rules-manager/security-group-manager-existing-group/security-group-manager-existing-group.component.ts

@@ -8,5 +8,12 @@ import { SecurityGroup } from '../../../../../security-group/sg.model';
   styleUrls: ['security-group-manager-existing-group.component.scss']
 })
 export class SecurityGroupManagerExistingGroupComponent {
-  @Input() public securityGroup: SecurityGroup;
+  @Input() public securityGroups: Array<SecurityGroup>;
+
+  public get securityGroupsLine(): string {
+    return this.securityGroups.map(securityGroup => {
+      return securityGroup.name;
+    })
+      .join(', ');
+  }
 }

src/app/vm/vm-creation/components/security-group-rules-manager/vm-creation-security-group-rules-manager.component.html

@@ -22,7 +22,7 @@ <h5 class="fancy-select-header">{{ 'VM_PAGE.VM_CREATION.SECURITY_GROUPS' | trans
 
     <cs-security-group-manager-existing-group
       *ngIf="isModeExisting"
-      [securityGroup]="savedData?.securityGroup"
+      [securityGroups]="savedData?.securityGroups"
     ></cs-security-group-manager-existing-group>
   </span>
 </cs-fancy-select>

src/app/vm/vm-creation/components/security-group-rules-manager/vm-creation-security-group-rules-manager.component.ts

@@ -5,6 +5,7 @@ import { Rules } from '../../../../shared/components/security-group-builder/rule
 import { VmCreationSecurityGroupData } from '../../security-group/vm-creation-security-group-data';
 import { VmCreationSecurityGroupMode } from '../../security-group/vm-creation-security-group-mode';
 import { VmCreationSecurityGroupComponent } from '../security-group/vm-creation-security-group.component';
+import * as cloneDeep from 'lodash/cloneDeep';
 
 
 @Component({
@@ -69,14 +70,15 @@ export class VmCreationSecurityGroupRulesManagerComponent implements ControlValu
         this.savedData.rules &&
         this.savedData.rules.templates &&
         !!this.savedData.rules.templates.length) ||
-      (this.isModeExisting && this.savedData && !!this.savedData.securityGroup)
+      (this.isModeExisting && this.savedData && !!this.savedData.securityGroups)
     );
   }
 
   public showDialog(): void {
+    const data = cloneDeep(this.savedData);
     this.dialog.open(VmCreationSecurityGroupComponent, {
       width: '800px',
-      data: this.savedData
+      data
     })
       .afterClosed()
       .subscribe((data: any) => {

src/app/vm/vm-creation/components/security-group-selector/security-group-selector.component.html

@@ -1,25 +1,31 @@
 <div
   *ngIf="securityGroups?.length"
-  class="security-group-radio-list"
+  class="security-group-checkbox-list"
 >
   <mat-list>
     <mat-list-item
       *ngFor="let sg of securityGroups"
       lines="2"
-      (click)="$event.stopPropagation(); selectSecurityGroup(sg)"
-      [class.selected-security-group]="securityGroup?.id === sg?.id"
+      [class.selected-security-group]="checkSelectedSG(sg?.id)"
     >
-      <h4 matLine>
-        <span>{{ sg.name }}</span>
-      </h4>
-      <p
-        matLine
-        class="matLine-secondary"
-      >
-        {{ sg.description }}
-      </p>
+      <span class="mat-list-text"
+      (click)="$event.stopPropagation(); selectSecurityGroup(sg)">
+
+        <h4 matLine>
+          <span>{{ sg.name }}</span>
+        </h4>
+        <p
+          matLine
+          class="matLine-secondary"
+        >
+          {{ sg.description }}
+        </p>
+      </span>
+
       <span>
-        <mat-radio-button [checked]="sg?.id === securityGroup?.id"></mat-radio-button>
+        <mat-checkbox
+          [checked]="checkSelectedSG(sg?.id)"
+          (change)="selectSecurityGroup(sg)"></mat-checkbox>
       </span>
     </mat-list-item>
   </mat-list>

src/app/vm/vm-creation/components/security-group-selector/security-group-selector.component.scss

@@ -12,7 +12,7 @@ mat-list-item .mat-line-secondary {
   color: rgba(0, 0, 0, 0.54);
 }
 
-.security-group-radio-list {
+.security-group-checkbox-list {
   display: flex;
   flex-direction: column;
   width: 100%;

src/app/vm/vm-creation/components/security-group-selector/security-group-selector.component.ts

@@ -17,34 +17,40 @@ import { SecurityGroup } from '../../../../security-group/sg.model';
 })
 export class SecurityGroupSelectorComponent implements ControlValueAccessor {
   @Input() public securityGroups: Array<SecurityGroup>;
-  public _securityGroup: SecurityGroup;
+  public _selectedSecurityGroups: Array<SecurityGroup> = [];
 
   @Input()
-  public get securityGroup(): SecurityGroup {
-    return this._securityGroup;
+  public get selectedSecurityGroups(): Array<SecurityGroup> {
+    return this._selectedSecurityGroups;
   }
 
-  public set securityGroup(value: SecurityGroup) {
+  public writeValue(value: Array<SecurityGroup>): void {
     if (value) {
-      this._securityGroup = value;
-      this.propagateChange(this.securityGroup);
+      this._selectedSecurityGroups = value;
     }
   }
 
-  public writeValue(value: SecurityGroup): void {
-    if (value) {
-      this.securityGroup = value;
-    }
-  }
+  public propagateChange: any = () => {
+  };
 
-  public propagateChange: any = () => {};
-  public registerOnTouched(): any {}
+  public registerOnTouched(): any {
+  }
 
   public registerOnChange(fn): void {
     this.propagateChange = fn;
   }
 
   public selectSecurityGroup(securityGroup: SecurityGroup): void {
-    this.securityGroup = securityGroup;
+    if (this.checkSelectedSG(securityGroup.id)) {
+      const index = this.selectedSecurityGroups.findIndex(_ => _.id === securityGroup.id);
+      this.selectedSecurityGroups.splice(index, 1);
+    } else {
+      this.selectedSecurityGroups.push(securityGroup);
+    }
+  }
+
+  public checkSelectedSG(securityGroupId: string): boolean {
+    const isSelectedItem = this.selectedSecurityGroups.find(securityGroup => securityGroup.id === securityGroupId);
+    return !!isSelectedItem;
   }
 }

src/app/vm/vm-creation/components/security-group/vm-creation-security-group.component.html

@@ -7,10 +7,10 @@ <h3 class="mat-dialog-title">
     (change)="setMode($event.value)"
   >
     <mat-button-toggle value="0" [checked]="displayMode === 0">
-      {{ 'SECURITY_GROUP_SELECTOR.BUILD' | translate }}
+      {{ 'SECURITY_GROUP_SELECTOR.CREATE' | translate }}
     </mat-button-toggle>
     <mat-button-toggle value="1" [checked]="displayMode === 1">
-      {{ 'SECURITY_GROUP_SELECTOR.SELECT' | translate }}
+      {{ 'SECURITY_GROUP_SELECTOR.SELECT_SHARED' | translate }}
     </mat-button-toggle>
   </mat-button-toggle-group>
 
@@ -23,7 +23,7 @@ <h3 class="mat-dialog-title">
   <cs-security-group-selector
     *ngIf="isModeSelector && sharedGroups"
     [securityGroups]="sharedGroups"
-    [(ngModel)]="savedData.securityGroup"
+    [(ngModel)]="savedData.securityGroups"
   ></cs-security-group-selector>
 </div>
 
@@ -32,7 +32,10 @@ <h3 class="mat-dialog-title">
     {{ 'COMMON.CANCEL' | translate }}
   </button>
 
-  <button mat-button (click)="onSave()">
+  <button
+    mat-button
+    [disabled]="!savedData.securityGroups.length"
+    (click)="onSave()">
     {{ 'COMMON.SAVE' | translate }}
   </button>
 </div>

src/app/vm/vm-creation/components/security-group/vm-creation-security-group.component.ts

@@ -6,6 +6,7 @@ import { Rules } from '../../../../shared/components/security-group-builder/rule
 // tslint:disable-next-line
 import { VmCreationSecurityGroupData } from '../../security-group/vm-creation-security-group-data';
 import { VmCreationSecurityGroupMode } from '../../security-group/vm-creation-security-group-mode';
+import { AuthService } from '../../../../shared/services/auth.service';
 
 
 @Component({
@@ -16,18 +17,24 @@ import { VmCreationSecurityGroupMode } from '../../security-group/vm-creation-se
 export class VmCreationSecurityGroupComponent implements OnInit {
   public sharedGroups: Array<SecurityGroup>;
 
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public savedData: VmCreationSecurityGroupData,
-    private dialogRef: MatDialogRef<VmCreationSecurityGroupComponent>,
-    private securityGroupService: SecurityGroupService
-  ) {
+  public get savedData(): VmCreationSecurityGroupData {
+    return this._savedData;
+  }
+
+  constructor(@Inject(MAT_DIALOG_DATA) public _savedData: VmCreationSecurityGroupData,
+              private dialogRef: MatDialogRef<VmCreationSecurityGroupComponent>,
+              private securityGroupService: SecurityGroupService,
+              private authService: AuthService) {
   }
 
   public ngOnInit(): void {
+    const account = this.authService.user.username;
     this.securityGroupService.getSharedGroups()
       .subscribe(groups => {
-        this.sharedGroups = groups;
-        this.savedData.securityGroup = this.sharedGroups[0];
+        this.sharedGroups = groups.filter(item => item.account === account);
+        if (!this._savedData.securityGroups) {
+          this._savedData.securityGroups = [this.sharedGroups[0]];
+        }
       });
   }
 
@@ -36,7 +43,7 @@ export class VmCreationSecurityGroupComponent implements OnInit {
   }
 
   public get displayMode(): VmCreationSecurityGroupMode {
-    return this.savedData.mode;
+    return this._savedData.mode;
   }
 
   public set displayMode(value: VmCreationSecurityGroupMode) {
@@ -45,7 +52,7 @@ export class VmCreationSecurityGroupComponent implements OnInit {
       1: VmCreationSecurityGroupMode.Selector
     };
 
-    this.savedData.mode = map[value];
+    this._savedData.mode = map[value];
   }
 
   public get isModeBuilder(): boolean {
@@ -67,14 +74,14 @@ export class VmCreationSecurityGroupComponent implements OnInit {
   }
 
   public onSave(): void {
-    this.dialogRef.close(this.savedData);
+    this.dialogRef.close(this._savedData);
   }
 
   public onCancel(): void {
     this.dialogRef.close();
   }
 
   public onBuilderGroupChange(rules: Rules): void {
-    this.savedData.rules = rules;
+    this._savedData.rules = rules;
   }
 }

src/app/vm/vm-creation/data/vm-creation-state.ts

@@ -148,10 +148,10 @@ export class VmCreationState {
 
     if (
       this.securityGroupData &&
-      this.securityGroupData.securityGroup &&
-      this.securityGroupData.securityGroup.id
+      this.securityGroupData.securityGroups &&
+      this.securityGroupData.securityGroups[0].id
     ) {
-      params.securityGroupIds = this.securityGroupData.securityGroup.id;
+      params.securityGroupIds = this.securityGroupData.securityGroups.map(item => item.id).join(','); // @todo
     }
 
     if (this.serviceOffering.areCustomParamsSet) {

src/app/vm/vm-creation/security-group/vm-creation-security-group-data.ts

@@ -6,7 +6,7 @@ import { Rules } from '../../../shared/components/security-group-builder/rules';
 export class VmCreationSecurityGroupData {
   public mode: VmCreationSecurityGroupMode;
   public rules: Rules;
-  public securityGroup: SecurityGroup;
+  public securityGroups: Array<SecurityGroup>;
 
   public static fromMode(mode: VmCreationSecurityGroupMode): VmCreationSecurityGroupData {
     return new VmCreationSecurityGroupData(mode);
@@ -16,14 +16,14 @@ export class VmCreationSecurityGroupData {
     return new VmCreationSecurityGroupData(VmCreationSecurityGroupMode.Builder, rules);
   }
 
-  public static fromSecurityGroup(securityGroup: SecurityGroup): VmCreationSecurityGroupData {
+  public static fromSecurityGroup(securityGroups: Array<SecurityGroup>): VmCreationSecurityGroupData {
     return new VmCreationSecurityGroupData(
-      VmCreationSecurityGroupMode.Selector, undefined, securityGroup);
+      VmCreationSecurityGroupMode.Selector, undefined, securityGroups);
   }
 
-  private constructor(mode?: VmCreationSecurityGroupMode, rules?: Rules, securityGroup?: SecurityGroup) {
+  private constructor(mode?: VmCreationSecurityGroupMode, rules?: Rules, securityGroups?: Array<SecurityGroup>) {
     this.mode = mode;
     this.rules = rules;
-    this.securityGroup = securityGroup;
+    this.securityGroups = securityGroups;
   }
 }

src/app/vm/vm-creation/services/vm-creation-security-group.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { VmCreationSecurityGroupData } from '../security-group/vm-creation-security-group-data';
 import { Observable } from 'rxjs/Observable';
-import { SecurityGroup } from '../../../security-group/sg.model';
 import { VmCreationSecurityGroupMode } from '../security-group/vm-creation-security-group-mode';
 import { GROUP_POSTFIX, SecurityGroupService } from '../../../security-group/services/security-group.service';
 import { NetworkRule } from '../../../security-group/network-rule.model';
@@ -13,13 +12,13 @@ import { Utils } from '../../../shared/services/utils/utils.service';
 export class VmCreationSecurityGroupService {
   constructor(private securityGroupService: SecurityGroupService) {}
 
-  public getSecurityGroupCreationRequest(securityGroupData: VmCreationSecurityGroupData): Observable<SecurityGroup> {
+  public getSecurityGroupCreationRequest(securityGroupData: VmCreationSecurityGroupData): Observable<any> {
     if (securityGroupData.mode === VmCreationSecurityGroupMode.Builder) {
       const data = this.securityGroupCreationData;
       const rules = this.getSecurityGroupCreationRules(securityGroupData.rules);
       return this.securityGroupService.createPrivate(data, rules);
     } else {
-      return Observable.of(securityGroupData.securityGroup);
+      return Observable.of(securityGroupData.securityGroups);
     }
   }
 

src/app/vm/vm-creation/services/vm-deployment.service.ts

@@ -60,7 +60,6 @@ export class VmDeploymentService {
 
   public deploy(state: VmCreationState): VmDeployObservables {
     const deployStatusObservable = new Subject<VmDeploymentMessage>();
-
     return {
       deployStatusObservable,
       deployObservable: this.deployObservable(deployStatusObservable, state)
@@ -108,7 +107,6 @@ export class VmDeploymentService {
         return this.getSecurityGroupCreationObservable(deployObservable, state)
       })
       .map(securityGroup => {
-        state.securityGroupData.securityGroup = securityGroup;
         return state;
       });
   }
@@ -208,7 +206,7 @@ export class VmDeploymentService {
   private getSecurityGroupCreationObservable(
     deployObservable: Subject<VmDeploymentMessage>,
     state: VmCreationState
-  ): Observable<SecurityGroup> {
+  ): Observable<SecurityGroup[]> {
     if (!state.doCreateSecurityGroup) {
       return Observable.of(null);
     }

src/app/vm/vm-creation/vm-creation.component.ts

@@ -22,7 +22,7 @@ import { KeyboardLayout } from './keyboards/keyboards.component';
 import { VmCreationService } from './services/vm-creation.service';
 import { VmDeploymentMessage, VmDeploymentService, VmDeploymentStage } from './services/vm-deployment.service';
 import { VmCreationSecurityGroupData } from './security-group/vm-creation-security-group-data';
-import { ParametrizedTranslation } from "../../dialog/dialog-service/dialog.service";
+import { ParametrizedTranslation } from '../../dialog/dialog-service/dialog.service';
 
 export interface VmCreationFormState {
   data: VmCreationData;

src/i18n/en.json

@@ -1082,8 +1082,8 @@
     "BASED_ON_VALUE": "Based on {{value}}",
     "BUILD_NEW_GROUP": "Build a new security group",
     "SELECT_EXISTING_GROUP": "Select an existing group",
-    "BUILD": "Build",
-    "SELECT": "Select",
+    "CREATE": "Create new",
+    "SELECT_SHARED": "Select Shared",
     "ALL_GROUPS": "All templates",
     "SELECTED_GROUPS": "Selected templates",
     "NETWORK_RULES": "Network rules",