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

…ups during VM creation - fixes

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

@@ -1,10 +1,8 @@
 <div class="mat-input-wrapper template-list">
-  <span class="ellipsis-overflow" [matTooltip]="securityGroupsLine">
-    <ng-container *ngIf="securityGroups?.length">
-      {{ securityGroupsLine }}
-    </ng-container>
-    <ng-container *ngIf="!securityGroups?.length">
-      {{ 'COMMON.NONE' | translate }}
-    </ng-container>
+  <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

@@ -11,13 +11,9 @@ export class SecurityGroupManagerExistingGroupComponent {
   @Input() public securityGroups: Array<SecurityGroup>;
 
   public get securityGroupsLine(): string {
-    if (this.securityGroups) {
-      return this.securityGroups.map(securityGroup => {
-        return securityGroup.name;
-      })
-        .join(', ');
-    } else {
-      return '';
-    }
+    return this.securityGroups.map(securityGroup => {
+      return securityGroup.name;
+    })
+      .join(', ');
   }
 }

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

@@ -1,26 +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]="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-checkbox
-          [checked]="checkSelectedSG(sg?.id)"></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

@@ -41,15 +41,17 @@ export class SecurityGroupSelectorComponent implements ControlValueAccessor {
   }
 
   public selectSecurityGroup(securityGroup: SecurityGroup): void {
-    if (this.checkSelectedSG(securityGroup.id)) {
-      const index = this.selectedSecurityGroups.findIndex(_ => _.id === securityGroup.id);
-      this.selectedSecurityGroups.splice(index, 1);
-    } else {
-      this.selectedSecurityGroups.push(securityGroup);
+    if (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) {
+  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

@@ -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,19 +17,23 @@ 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;
-        if (!this.savedData.securityGroups) {
-          this.savedData.securityGroups = [this.sharedGroups[0]];
+        this.sharedGroups = groups.filter(item => item.account === account);
+        if (!this._savedData.securityGroups) {
+          this._savedData.securityGroups = [this.sharedGroups[0]];
         }
       });
   }
@@ -38,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) {
@@ -47,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 {
@@ -69,15 +74,14 @@ export class VmCreationSecurityGroupComponent implements OnInit {
   }
 
   public onSave(): void {
-    console.log('SAVED DATA', this.savedData);
-    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/services/vm-deployment.service.ts

@@ -60,7 +60,6 @@ export class VmDeploymentService {
 
   public deploy(state: VmCreationState): VmDeployObservables {
     const deployStatusObservable = new Subject<VmDeploymentMessage>();
-    console.log('11111 DEPLOY STATE', state);
     return {
       deployStatusObservable,
       deployObservable: this.deployObservable(deployStatusObservable, state)