-
- {{ sg.name }}
-
-
- {{ sg.description }}
-
+
+
+
+ {{ sg.name }}
+
+
+ {{ sg.description }}
+
+
+
+ [checked]="checkSelectedSG(sg?.id)"
+ (change)="selectSecurityGroup(sg)">
diff --git a/src/app/vm/vm-creation/components/security-group-selector/security-group-selector.component.scss b/src/app/vm/vm-creation/components/security-group-selector/security-group-selector.component.scss
index 6ac5a30283..83190ca073 100644
--- a/src/app/vm/vm-creation/components/security-group-selector/security-group-selector.component.scss
+++ b/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%;
diff --git a/src/app/vm/vm-creation/components/security-group-selector/security-group-selector.component.ts b/src/app/vm/vm-creation/components/security-group-selector/security-group-selector.component.ts
index 7b99b4d01c..8f3178833a 100644
--- a/src/app/vm/vm-creation/components/security-group-selector/security-group-selector.component.ts
+++ b/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;
}
diff --git a/src/app/vm/vm-creation/components/security-group/vm-creation-security-group.component.html b/src/app/vm/vm-creation/components/security-group/vm-creation-security-group.component.html
index f8dba9b68e..ff7873d51e 100644
--- a/src/app/vm/vm-creation/components/security-group/vm-creation-security-group.component.html
+++ b/src/app/vm/vm-creation/components/security-group/vm-creation-security-group.component.html
@@ -32,7 +32,10 @@
{{ 'COMMON.CANCEL' | translate }}
-
diff --git a/src/app/vm/vm-creation/components/security-group/vm-creation-security-group.component.ts b/src/app/vm/vm-creation/components/security-group/vm-creation-security-group.component.ts
index f20ce827e0..d8e614c35e 100644
--- a/src/app/vm/vm-creation/components/security-group/vm-creation-security-group.component.ts
+++ b/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