Merge pull request #192 from nmaas-platform/149-handle-namespace-crea…

…tion-during-domain-provisioning-1

149 handle namespace creation during domain provisioning 1

src/app/app.module.ts

@@ -25,7 +25,6 @@ import {ServiceUnavailableModule} from './service-unavailable/service-unavailabl
 import {ServiceUnavailableService} from './service-unavailable/service-unavailable.service';
 import {NgTerminalModule} from 'ng-terminal';
 
-
 export function appConfigFactory(config: AppConfigService) {
     return function create() {
         return config.load();

src/app/appmarket/appinstance/modals/add-members-modal/add-members-modal.component.css

@@ -1,4 +1,4 @@
 :host ::ng-deep .p-multiselect {
-    min-width: 15rem;
-    max-width: 18rem;
+    min-width: 20rem;
+    max-width: 22rem;
 }

src/app/appmarket/appinstance/modals/add-members-modal/add-members-modal.component.html

@@ -2,10 +2,10 @@
     <div class="nmaas-modal-header">
         {{'ADD_MEMBERS_MODAL.HEADER' | translate}}
     </div>
-    <div class="nmaas-modal-body" style="min-height: 200px; width: 100%">
+    <div class="nmaas-modal-body" style="min-height: 400px; width: 100%">
         <div class="col-sm-4">
             <h5>{{'ADD_MEMBERS_MODAL.SELECT_USERS' | translate}}</h5>
-            <p-multiSelect [options]="selectItems" [(ngModel)]="members" filterBy="username"
+            <p-multiSelect [options]="selectItems" [(ngModel)]="members" filterBy="value" filter="true"
                            [filterPlaceHolder]="'ADD_MEMBERS_MODAL.FILTER_PLACEHOLDER' | translate" [panelStyle]="{minWidth:'25em'}"
                            [overlayVisible]="true" >
             </p-multiSelect>

src/app/appmarket/domains/domain-annotations/domain-annotations.component.html

@@ -0,0 +1,9 @@
+<div class="col-sm-12 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10">
+    <h3> {{'DOMAINS.ANNOTATIONS.HEADER' | translate}}</h3>
+    <p>{{'DOMAINS.ANNOTATIONS.SUBHEADER' | translate}} </p>
+    <div class="flex flex-grow-1 mt-6 col-sm-12" style="width: 100% !important;">
+        <app-domain-namespace-annotations [annotationRead]="annotations" [globalSettings]="true" (annotations)="handleAnnotationsUpdate($event)" 
+        (trigerDelete)="handleDelete($event)" class="flex flex-grow-1"></app-domain-namespace-annotations>
+    </div>
+
+</div>

src/app/appmarket/domains/domain-annotations/domain-annotations.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DomainAnnotationsComponent } from './domain-annotations.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
+
+describe('DomainAnnotationsComponent', () => {
+  let component: DomainAnnotationsComponent;
+  let fixture: ComponentFixture<DomainAnnotationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DomainAnnotationsComponent ],
+      imports: [
+        HttpClientTestingModule,
+        TranslateModule.forRoot({
+          loader: {
+              provide: TranslateLoader,
+              useClass: TranslateFakeLoader
+          }
+      }),
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DomainAnnotationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/appmarket/domains/domain-annotations/domain-annotations.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { DomainService } from '../../../service';
+import { KeyValue } from '../../../model/key-value';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-domain-annotations',
+  templateUrl: './domain-annotations.component.html',
+  styleUrls: ['./domain-annotations.component.css']
+})
+export class DomainAnnotationsComponent implements OnInit {
+
+  public annotations: Observable<KeyValue[]> ;
+
+  constructor(private readonly domainService: DomainService) { }
+
+  ngOnInit(): void {
+
+   this.annotations = this.domainService.getAnnotations();
+  }
+
+  public handleAnnotationsUpdate(event: any ) {
+    console.warn(event)
+
+    this.domainService.addAnnotations(event).subscribe(_ => {
+      this.annotations = this.domainService.getAnnotations();
+    })
+  }
+
+  public handleDelete(key: string) {
+    console.warn("trigger delete for", key);
+
+    this.domainService.deleteAnnotation(key).subscribe(_ => {
+      this.annotations = this.domainService.getAnnotations();
+    })
+  }
+
+}

src/app/appmarket/domains/domain/domain.component.html

@@ -142,7 +142,10 @@ <h3>{{ 'DOMAIN_DETAILS.TITLE' | translate }}</h3>
 			</div>
 		</div>
 
-		<app-domain-namespace-annotations [annotationRead]="domain.annotations"></app-domain-namespace-annotations>
+
+		<div *ngIf="isInMode(ComponentMode.CREATE)" >
+		<app-domain-namespace-annotations [annotationRead]="annotations" (annotations)="handleAnnotationsChange($event)"></app-domain-namespace-annotations>
+		</div>
 
 		<div class="panel panel-default">
 			<div class="panel-heading">{{ 'DOMAIN_DETAILS.APP_STATUS' | translate }}</div>

src/app/appmarket/domains/domain/domain.component.ts

@@ -15,6 +15,7 @@ import {DcnDeploymentType} from '../../../model/dcndeploymenttype';
 import {CustomerNetwork} from '../../../model/customernetwork';
 import {MinLengthDirective} from '../../../directive/min-length.directive';
 import {MaxLengthDirective} from '../../../directive/max-length.directive';
+import { KeyValue } from '../../../model/key-value';
 
 
 @Component({
@@ -45,6 +46,8 @@ export class DomainComponent extends BaseComponent implements OnInit {
 
     public displayCustomerNetworksSection = false;
 
+    public annotations : Observable<KeyValue[]> = of([]);
+
     constructor(public domainService: DomainService,
                 protected userService: UserService,
                 private router: Router,
@@ -60,6 +63,7 @@ export class DomainComponent extends BaseComponent implements OnInit {
         this.modal.setModalType('warning');
         this.modal.setStatusOfIcons(true);
         this.mode = this.getMode(this.route);
+        console.warn("Route:",this.route, this.getMode(this.route))
         this.route.params.subscribe(params => {
             if (params['id'] !== undefined) {
                 this.domainId = +params['id'];
@@ -77,6 +81,10 @@ export class DomainComponent extends BaseComponent implements OnInit {
             } else {
                 this.domain = new Domain();
                 this.domain.active = true;
+               this.annotations = this.domainService.getAnnotations();
+               this.annotations.subscribe(data => {
+                this.domain.annotations = data;
+               })
             }
             if (!this.authService.hasRole('ROLE_OPERATOR')) {
                 let users: Observable<User[]>;
@@ -162,4 +170,11 @@ export class DomainComponent extends BaseComponent implements OnInit {
     public addNetwork() {
         this.domain.domainDcnDetails.customerNetworks.push(new CustomerNetwork());
     }
+
+    public handleAnnotationsChange(event: KeyValue[]){
+        this.domain.annotations = event;
+        console.log("Updated domain annotations", this.domain.annotations)
+
+    }
+
 }

src/app/appmarket/domains/domains.module.ts

@@ -24,6 +24,7 @@ import {DropdownModule} from 'primeng/dropdown';
 import {MultiSelectModule} from 'primeng/multiselect';
 import {RemovalConfirmationModalComponent} from './modals/removal-confirmation-modal/removal-confirmation-modal.component';
 import {SearchDomainGroupPipe} from './domain-group-search.pipe';
+import { DomainAnnotationsComponent } from './domain-annotations/domain-annotations.component';
 
 
 @NgModule({
@@ -34,7 +35,8 @@ import {SearchDomainGroupPipe} from './domain-group-search.pipe';
     DomainGroupsComponent,
     DomainGroupViewComponent,
     RemovalConfirmationModalComponent,
-      SearchDomainGroupPipe
+      SearchDomainGroupPipe,
+      DomainAnnotationsComponent
   ],
     imports: [
         CommonModule,

src/app/appmarket/domains/domains.routes.ts

@@ -8,6 +8,7 @@ import {DomainGroupsComponent} from './domain-groups/domain-groups.component';
 import {DomainGroupViewComponent} from './domain-group-view/domain-group-view.component';
 import {BulkDomainListComponent} from '../bulkDeployment/bulk-domain-list/bulk-domain-list.component';
 import {BulkViewComponent} from '../bulkDeployment/bulk-view/bulk-view.component';
+import { DomainAnnotationsComponent } from './domain-annotations/domain-annotations.component';
 
 export const DomainsRoutes: Route[] = [
     {
@@ -18,6 +19,10 @@ export const DomainsRoutes: Route[] = [
         path: 'admin/domains/add', component: DomainComponent, canActivate: [AuthGuard, RoleGuard],
         data: {mode: ComponentMode.CREATE, roles: ['ROLE_SYSTEM_ADMIN']}
     },
+    {
+        path: 'admin/domains/annotations', component: DomainAnnotationsComponent, canActivate: [AuthGuard, RoleGuard],
+        data: {mode: ComponentMode.CREATE, roles: ['ROLE_SYSTEM_ADMIN']}
+    },
     {
         path: 'admin/domains/view/:id', component: DomainComponent, canActivate: [AuthGuard, RoleGuard],
         data: {mode: ComponentMode.VIEW, roles: ['ROLE_SYSTEM_ADMIN', 'ROLE_DOMAIN_ADMIN', 'ROLE_OPERATOR', 'ROLE_VL_DOMAIN_ADMIN']}

src/app/appmarket/domains/list/domainslist.component.html

@@ -1,17 +1,20 @@
 <div class="col-sm-12 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10">
     <h3>{{ 'DOMAINS.TITLE' | translate }}</h3>
-    <div class="flex space-between">
+    <div class="flex space-between align-content-center">
         <div class="flex">
             <a *roles="['ROLE_SYSTEM_ADMIN']" [routerLink]="['add']" class="btn btn-primary"
                role="button">{{'DOMAINS.ADD_BUTTON' | translate}}</a>
         </div>
+        <div *roles="['ROLE_SYSTEM_ADMIN']" class="flex" style="align-content: center; margin-top: 8px;">
+            <button class="btn btn-secondary" [routerLink]="['annotations']">{{'DOMAINS.ANNOTATIONS.EDIT' | translate}}</button>
+        </div>
         <div *roles="['ROLE_SYSTEM_ADMIN']" class="flex" style="align-content: center; margin-top: 8px;">
             <span style="align-content: center; margin-right: 5px;"> {{'DOMAINS.NOTACTIVE' | translate}}</span>
             <p-checkbox id="showNotActive" [binary]="true" [(ngModel)]=" showNotActive"></p-checkbox>
         </div>
-        <div class="flex">
+        <div class="flex align-content-center">
             {{ 'DOMAINS.ITEMS_PER_PAGE' | translate }}:
-            <span id="selectionItems" class="dropdown" style="vertical-align: middle; display: inline-block; margin-right: 1rem;">
+            <span id="selectionItems" class="dropdown flex align-content-center" style="vertical-align: middle; display: inline-block; margin-right: 1rem;">
         <button class="dropdown-toggle btn" data-toggle="dropdown" data-close-others="true">
             <span class="flex mt-2 mr-1">{{maxItemsOnPage}}</span>
         </button>

src/app/service/domain.service.ts

@@ -9,6 +9,7 @@ import {Id} from '../model';
 import {Domain} from '../model/domain';
 import {User} from '../model';
 import {DomainGroup} from '../model/domaingroup';
+import { KeyValue } from '../model/key-value';
 
 @Injectable({
   providedIn: 'root',
@@ -114,4 +115,15 @@ export class DomainService extends GenericDataService {
     return this.put(this.url + 'group/' + id, domainGroup);
   }
 
+  public getAnnotations(): Observable<KeyValue[]> {
+    return this.get<KeyValue[]>(this.url + 'annotations')
+  }
+
+  public addAnnotations(annotations: KeyValue[]): Observable<void> {
+    return this.post(this.url + 'annotations', annotations)
+  }
+
+  public deleteAnnotation(key: string) : Observable<void>{
+    return this.delete(`${this.url}annotations/${key}`,)
+  }
 }

src/app/shared/domain-namespace-annotations/domain-namespace-annotations.component.html

@@ -1,28 +1,27 @@
-<div class="panel panel-default" >
+<div class="panel panel-default" style="width: 100% !important;" >
     <div class="panel-heading">
         <div style="display: flex; justify-content: start; align-items: center">
             <div>
-                {{"Domain namespace annotations creation"}}
+                {{'DOMAINS.ANNOTATIONS.CREATION' | translate}}
             </div>
         </div>
     </div>
     <div class="panel-body">
         <div  style="display: flex; justify-content: end">
-            <button  type="button" class="btn btn-success" (click)="addAnnotation()">{{"Add annotation"}}</button>
+            <button  type="button" class="btn btn-success" (click)="addAnnotation()">{{'DOMAINS.ANNOTATIONS.ADD'| translate}}</button>
         </div>
         <div class="grid flex flex-grow-1">
             <div class="col-4">
-                {{'KEY'}}
-<!--                <div *ngIf="isKeysUnique === false"><em class="pi pi-exclamation-circle" style="color: red"></em></div>-->
+                {{'DOMAINS.ANNOTATIONS.KEY' | translate}}
             </div>
             <div class="col-6">
-                {{'VALUE'}}
+                {{'DOMAINS.ANNOTATIONS.VALUE' | translate}}
             </div>
         </div>
         <div class="grid flex flex-grow-1 mt-4 mb-2" *ngFor="let kv of keyValue">
             <div class="flex grid flex-grow-1">
                 <div class="col-4">
-                    <input pInputText type="text" (focusout)="emmitValue()" [(ngModel)]="kv.key" class="flex flex-grow-1" style="width: 100%" [ngClass]="{ 'border-red': isKeyNotUnique(kv.key)}">
+                    <input pInputText type="text" [disabled]="getReadOnlyValue(kv.key)"  (focusout)="emmitValue(kv.key)" [(ngModel)]="kv.key" class="flex flex-grow-1" style="width: 100%" [ngClass]="{ 'border-red': isKeyNotUnique(kv.key)}">
                 </div>
                 <div class="col-6">
                     <input pInputText type="text" (focusout)="emmitValue()" [(ngModel)]="kv.value" class="flex flex-grow-1" style="width: 100%">

src/app/shared/domain-namespace-annotations/domain-namespace-annotations.component.ts

@@ -1,5 +1,7 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {KeyValue} from '../../model/key-value';
+import { Observable, of } from 'rxjs';
+import { AnonymousSubject } from 'rxjs/internal/Subject';
 
 @Component({
     selector: 'app-domain-namespace-annotations',
@@ -9,32 +11,52 @@ import {KeyValue} from '../../model/key-value';
 export class DomainNamespaceAnnotationsComponent implements OnInit {
 
     @Input()
-    public annotationRead: KeyValue[];
+    public annotationRead: Observable<KeyValue[]> = of([]);
+
+    @Input()
+    public globalSettings: boolean = false;
 
     @Output()
     public annotations: EventEmitter<KeyValue[]> = new EventEmitter<KeyValue[]>();
 
+    @Output()
+    public trigerDelete: EventEmitter<String> = new EventEmitter<String>();
+
     public keyValue: KeyValue[] = []
 
     private keySetNotUnique: string[] = [];
 
     public isKeysUnique = true;
+    public isKeyValuePresent =true;
+
+    public reaOnlyMap = new Map<String, boolean>();
 
     constructor() {
     }
 
     ngOnInit(): void {
+        console.warn("annotations", this.annotationRead)
+        this.annotationRead.subscribe(annotation =>{
+            this.keyValue = annotation;
+            annotation.forEach(ann => {
+                this.reaOnlyMap.set(ann.key,true);
+            })
+        })
     }
 
-    public emmitValue() {
+    public emmitValue(key: string = "") {
         this.checkDuplicate()
-        if ( this.isKeysUnique) {
+        if ( this.isKeysUnique && this.isKeyValuePresent) {
             this.annotations.emit(this.keyValue);
         }
+        if(key !== "") {
+            this.reaOnlyMap.set(key, true);
+        }
     }
 
     public checkDuplicate() {
         const keySet = new Set<string>();
+        this.isKeyValuePresent = true;
         this.keyValue.forEach(kv => {
             if (keySet.has(kv.key)) {
                 console.error("duplicated keys in annotations")
@@ -43,6 +65,10 @@ export class DomainNamespaceAnnotationsComponent implements OnInit {
             } else {
                 keySet.add(kv.key)
             }
+            console.warn("check duplicate",kv, kv.hasOwnProperty('value'))
+            if(kv.value === null || !kv.hasOwnProperty('value')) {
+                this.isKeyValuePresent = false;
+            }
         })
         if (this.keyValue.length === keySet.size) {
             this.isKeysUnique = true;
@@ -51,20 +77,25 @@ export class DomainNamespaceAnnotationsComponent implements OnInit {
         console.warn("after checking", this.isKeysUnique, keySet)
     }
 
-    showModal() {
-
-    }
-
     addAnnotation() {
         this.keyValue.push(new KeyValue())
     }
 
     deleteAnnotation(key: any) {
         this.keyValue = this.keyValue.filter(val => val.key !== key)
+        if(this.globalSettings) {
+            this.trigerDelete.emit(key);
+        }
     }
 
    public isKeyNotUnique(key: string) {
         return this.keySetNotUnique.some(val => val === key)
     }
 
+    public getReadOnlyValue(key: string) {
+        if(this.reaOnlyMap.has(key)){
+            return this.reaOnlyMap.get(key);
+        } else return false;
+    }
+
 }