diff options
author | 2019-12-10 22:22:41 +0530 | |
---|---|---|
committer | 2019-12-10 22:45:02 +0530 | |
commit | fa65ff3142f318ae308a5271e5c33d1933e58b58 (patch) | |
tree | 7f72d1da5b4ec5d19971ba76dbc1340a1aca04e4 /portal-FE-common/src/app/pages | |
parent | f446cfb57f14004d6b34b137f8fa9802f6fdbdf6 (diff) |
Added portal-FE-common - angular upgrade code
Added Microservice-Onboarding Component
Issue-ID: PORTAL-795
Change-Id: I3cc9836155a5935e754c7ad25929bdd6e5e63e3f
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>
Diffstat (limited to 'portal-FE-common/src/app/pages')
8 files changed, 1144 insertions, 0 deletions
diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.html b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.html new file mode 100644 index 00000000..4ec8ae3d --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.html @@ -0,0 +1,214 @@ +<!-- + ============LICENSE_START========================================== + ONAP Portal + =================================================================== + Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + =================================================================== + + Unless otherwise specified, all software contained herein is licensed + under the Apache License, Version 2.0 (the "License"); + you may not use this software except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + + Unless otherwise specified, all documentation contained herein is licensed + under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + you may not use this documentation except in compliance with the License. + You may obtain a copy of the License at + + https://creativecommons.org/licenses/by/4.0/ + + Unless required by applicable law or agreed to in writing, documentation + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + + ============LICENSE_END============================================ + + + --> + +<div class="container"> + <form name="form" (ngSubmit)="f.form.valid && saveChanges()" #f="ngForm" novalidate autocomplete="off"> + + <!--Modal Headers--> + <div class="modal-header"> + <h4 class="modal-title">Microservice Onboarding</h4> + <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')"> + <span aria-hidden="true">×</span> + </button> + </div> + + <!--Modal Body goes here--> + <div class="modal-body"> + <div id="microservices" class="microservice-add-details-model"> + <div class="microservice-properties-main"> + <div class="item required"> + <div class="item-label">Microservice Name</div> + <input id="microservice-details-input-name" class="table-search-field" + type="text" name="name" #name="ngModel" ng-pattern="/^[\w -]*$/" maxlength="100" + [(ngModel)]="ms.name" + ng-change="microserviceAddDetails.updateServiceName()" + [ngClass]="{'is-invalid': f.submitted && name.invalid}" required /> + + <div class="error-container" *ngIf="f.submitted && name.invalid"> + <div class="error-container"> + <small id="microservices-details-input-name-required" class="err-message"> + Microservice Name is required + </small> + </div> + </div> + </div> + + + <div class="item required"> + <div class="item-label">Microservice Description</div> + <textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc" + name="desc" [(ngModel)]="ms.desc" #desc="ngModel" class="microservice-desc" + ng-change="microserviceAddDetails.updateDesc()" + [ngClass]="{'is-invalid': f.submitted && desc.invalid}" required> + </textarea> + + <div class="error-container" *ngIf="f.submitted && desc.invalid"> + <div class="error-container"> + <small id="microservices-details-input-desc-required" class="err-message"> + Microservice Description is required + </small> + </div> + </div> + </div> + + <div class="item required"> + <div class="service-select"> + <mat-form-field> + <mat-label>Applications Name</mat-label> + <mat-select name="microservice-details-application-select" + [(ngModel)]="ms.appId" #appId="ngModel" [(value)]="selected" + [ngClass]="{'is-invalid': f.submitted && appId.invalid}" required> + <mat-option *ngFor="let d of applicationList" [value]="d.value" >{{d.title}}</mat-option> + </mat-select> + </mat-form-field> + </div> + + <div class="error-container" *ngIf="f.submitted && appId.invalid"> + <div class="error-container"> + <small id="microservices-details-input-appid-required" class="err-message"> + Please select microservice Application + </small> + </div> + </div> + </div> + + <div class="item required"> + <div class="item-label">Microservice Endpoint URL</div> + <input id="microservice-details-input-endpoint-url" + [(ngModel)]="ms.url" #url="ngModel" ng-change="microserviceAddDetails.updateURL()" type="text" + name="url" maxlength="200" [ngClass]="{'is-invalid': f.submitted && url.invalid}" required /> + + <div class="error-container" *ngIf="f.submitted && url.invalid"> + <div class="error-container"> + <small id="microservices-details-input-url-required" class="err-message"> + Microservice Endpoint URL is required + </small> + </div> + </div> + </div> + + <div class="item"> + <div class="service-select"> + <mat-form-field> + <mat-label>Security Type</mat-label> + <mat-select name="microservice-details-input-security-type" [(ngModel)]="ms.securityType" [(value)]="selected"> + <mat-option *ngFor="let d of availableSecurityTypes" [value]="d.name" >{{d.name}}</mat-option> + </mat-select> + </mat-form-field> + </div> + </div> + + <div class="item" *ngIf="ms.securityType == 'Basic Authentication'"> + <div class="item-label">Username</div> + <input id="microservice-details-input-username" class="table-search-field" + type="text" name="username" maxlength="100" + [(ngModel)]="ms.username" /> + </div> + + <div class="item" *ngIf="ms.securityType == 'Basic Authentication'"> + <div class="item-label">Password</div> + <input id="microservice-details-input-password" class="table-search-field" + type="password" name="password" maxlength="100" + [(ngModel)]="ms.password" /> + </div> + + <div class="item" *ngIf="isEditMode"> + <div class="left-test-item"> + <div class="item-label">Test Microservice</div> + </div> + <div class="right-test-item"> + <div id="microservice-details-test-button" class="test-button" + (click)="testServiceURL()">Test</div> + </div> + </div> + + <div class="item" *ngIf="isEditMode"> + <div class="item-label">JSON output</div> + <textarea id="microservice-details-input-json" class="json-field" + name="json"></textarea> + </div> + + <div class="add-para-item"> + <div class="item-label add-label-left">Add User Parameter</div> + <div class="icon-primary-accordion-plus" (click)="addParameter()"> + <i class="icon ion-ios-add-circle-outline"></i> + </div> + </div> + + <div class="item"> + <div class="param-label-item-left" + *ngIf="ms.parameterList.length > 0"> + Parameter Key + </div> + <div class="para-label-item-right" + *ngIf="ms.parameterList.length > 0"> + Parameter Default Value + </div> + + <div id="microservice-details-user-paramters" *ngFor="let parameter of ms.parameterList; let i=index"> + <div class="param-item-left"> + <input id="microservice-details-input-user-parameter-key" + class="table-search-field" type="text" name="param-key" maxlength="200" + [(ngModel)]="parameter.para_key" /> + <input id="microservice-details-input-user-parameter-value" + class="table-search-fields" type="text" name="param-value" + maxlength="200" [(ngModel)]="parameter.para_value" /> + </div> + + <div (click)="removeParamItem(parameter)"> + <i class="icon ion-ios-remove-circle-outline"></i> + </div> + </div> + + <div class="microservice-property"> + <mat-checkbox name="active" type="checkbox" [(ngModel)]="ms.active" + id="microservices-checkbox-app-is-enabled" [checked]="ms.active"> + Active + </mat-checkbox> + </div> + </div> + </div> + </div> + </div> + <!--Modal Footer goes Here--> + <div class="modal-footer"> + <button type="submit" class="btn btn-primary">Save</button> + <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button> + </div> + </form> +</div>
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.scss b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.scss new file mode 100644 index 00000000..1ea39095 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.scss @@ -0,0 +1,211 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + +::ng-deep .modal-dialog { + max-width: 600px; + width: 600px; + overflow-x: auto; + overflow-y: auto; +} + +::ng-deep .modal-body { + padding: -1rem; +} + +::ng-deep .mat-form-field-infix { + width: 400px; +} + +.microservice-add-details-model .microservice-properties-main { + padding-left: 20px; + padding-right: 20px; + margin-bottom: 50px; + height: 430px; + width: 100%; + overflow-x: auto; +} + +.microservice-add-details-model .microservice-properties-main .item { + position: relative; + margin-bottom: 15px; + width: 400px; +} + +.microservice-add-details-model .microservice-properties-main .item .error-container { + position: absolute; + width: 280px; + display: block; + height: 12px; + line-height: 12px; +} + +.microservice-add-details-model .microservice-properties-main .item .error-container .err-message { + color: #cf2a2a; + font-size: 10px; +} + +.microservice-add-details-model .microservice-properties-main .item .item-label { + color: #5a5a5a; + font-family: Omnes-ECOMP-W02,Arial; + font-size: 14px; +} + +.microservice-add-details-model .microservice-properties-main .item .left-test-item { + display: inline-block; + width: 85%; + background: #fff; +} + +.microservice-add-details-model .microservice-properties-main .item .right-test-item { + position: relative; + display: inline-block; + width: 15%; + float: right; +} + +.microservice-add-details-model .microservice-properties-main .item .test-button { + color: #fff; + font-family: Omnes-ECOMP-W02-Medium,Arial; + font-size: 14px; + border-style: solid; + border-width: 1px; + border-radius: 6px; + box-shadow: 0 1px 0.99px 0.01px rgba(2,60,89,.004); + height: 29px; + line-height: 29px; + cursor: pointer; + text-align: center; + background: #067ab4; +} + +.microservice-add-details-model .microservice-properties-main .item { + position: relative; + margin-bottom: 15px; + width: 400px; +} + +.microservice-add-details-model .microservice-properties-main .add-para-item { + position: relative; + display: inline-flex; +} + +.microservice-add-details-model .microservice-properties-main .add-para-item .add-label-left { + line-height: 25px; + height: 30px; + vertical-align: middle; + display: inline-block; + margin-right: 10px; + background: #fff; + color: #5a5a5a; + font-family: Omnes-ECOMP-W02,Arial; + font-size: 14px; +} + +.microservice-add-details-model .microservice-properties-main .microservice-property { + margin-top: 10px; + position: relative; +} + +.icon-primary-accordion-minus, .icon-primary-expanded, .icon-primary-accordion-plus, .icon-primary-collapsed { + font-size: 20px !important; +} + +#microservice-details-input-name{ + width: 16em; +} + +#widgets-details-input-desc{ + width: 25em; +} + +.microservice-desc { + overflow: auto; + resize: vertical; + width: 29em; +} + +.json-field { + overflow: auto; + resize: vertical; + width: 25em; +} + +#microservice-details-input-app{ + width: 25em; + height: 32px; +} + +#microservice-details-input-endpoint-url{ + width: 25em; +} + +#microservice-details-input-security-type{ + width: 25em; + height: 32px; +} + +.microservice-add-details-model .microservice-properties-main .item .para-label-item-right { + margin-left: 201px!important; + position: absolute!important; + margin-top: -19px!important; + width: 50%!important; +} + +.microservice-add-details-model .microservice-properties-main .item .para-item-right { + margin-top: -27px; + position: absolute; + margin-left: 500px; +} + +.table-search-field { + width: 48% !important; + margin-bottom: 5px; +} + +#microservice-details-user-paramters{ + display: inline-flex; +} + +.required:before { + color: #cf2a2a; + margin-right: 2px; + content: "* "; + position: absolute; + top: 28px; + left: -10px; +}
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.spec.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.spec.ts new file mode 100644 index 00000000..5589854c --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.spec.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MicroserviceAddDetailsComponent } from './microservice-add-details.component'; + +describe('MicroserviceAddDetailsComponent', () => { + let component: MicroserviceAddDetailsComponent; + let fixture: ComponentFixture<MicroserviceAddDetailsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MicroserviceAddDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MicroserviceAddDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.ts new file mode 100644 index 00000000..5e359dd4 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.ts @@ -0,0 +1,303 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { IMircroservies } from 'src/app/shared/model/microservice-onboarding/microservices'; +import { MicroserviceService, WidgetOnboardingService } from '../../../shared/services/index'; +import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'app-microservice-add-details', + templateUrl: './microservice-add-details.component.html', + styleUrls: ['./microservice-add-details.component.scss'] +}) +export class MicroserviceAddDetailsComponent implements OnInit { + + @Input() public ms: IMircroservies; + @Output() passEntry: EventEmitter<any> = new EventEmitter(); + result: any; + selected: any; + isEditMode: any; + originalName: string; + dupliateName = false; + emptyServiceName = false; + emptyServiceDesc = false; + emptyServiceURL = false; + emptyServiceApp = false; + availableSecurityTypes = []; + availableWidgets = []; + applicationList: Array<Object> = []; + + constructor(public microservice: MicroserviceService, public widgetOnboardingService: WidgetOnboardingService, + public activeModal: NgbActiveModal, public ngbModal: NgbModal) { } + + ngOnInit() { + if(this.ms.name){ + this.isEditMode = true; + }else{ + this.isEditMode = false; + } + this.ms.parameterList = []; + this.ms.active = true; + this.populateAvailableApps(); + this.getAvailableSecurityTypes(); + } + + getAvailableWidgets(serviceId){ + console.log("getAvailableWidgets called"); + this.microservice.getWidgetListByService(serviceId) + .subscribe(data => { + this.result = data; + if (this.result == null || this.result) { + console.log('MicroserviceService::getServiceList Failed: Result or result.data is null'); + }else { + this.availableWidgets = []; + for(var i = 0; i < data.length; i++){ + this.availableWidgets.push({ + name: data[i] + }) + } + } + }, error =>{ + console.log(error); + }); + }; + + getAvailableSecurityTypes(): Array<String> { + this.availableSecurityTypes = []; + this.availableSecurityTypes.push({ + id: 0, + name: 'No Authentication' + }); + this.availableSecurityTypes.push({ + id: 1, + name: 'Basic Authentication' + }); + this.availableSecurityTypes.push({ + id: 2, + name: 'Cookie based Authentication' + }); + + return this.availableSecurityTypes; + }; + + populateAvailableApps(){ + this.widgetOnboardingService.populateAvailableApps() + .subscribe( _data => { + let allPortalsFilterObject = {index: 0, title: 'Select Application', value: ''}; + this.applicationList = [allPortalsFilterObject]; + var realAppIndex = 1; + for (let i = 1; i <= _data.length; i++) { + if (!_data[i-1].restrictedApp) { + this.applicationList.push({ + index: realAppIndex, + title: _data[i - 1].name, + value: _data[i - 1].id + }) + realAppIndex = realAppIndex + 1; + } + } + }, error => { + console.log(error); + }); + }; + + addParameter() { + this.ms.parameterList.push({}); + } + + testServiceURL(){ + console.log("testServiceURL called id is :: ",this.ms.id) + this.microservice.getServiceJSON(this.ms.id) + .subscribe( _data => { + this.result = _data; + console.log("testServiceURL response :: ",this.result); + document.getElementById("microservice-details-input-json").innerHTML = (JSON.stringify(this.result)); + }, error => { + document.getElementById("microservice-details-input-json").innerHTML = "Something went wrong. Please go back to the previous page or try again later."; + console.log(error); + }); + } + + removeParamItem(parameter: any){ + console.log("removeParamItem called", parameter); + this.ms.parameterList.splice(parameter.para_key, 1); + this.microservice.getUserParameterById(parameter) + .subscribe(data => { + this.result = data; + if (this.result == null || this.result) { + console.log('MicroserviceService::removeParamItem Failed: Result or result.data is null'); + }else if(this.result && this.result.length > 0) { + this.microservice.deleteUserParameterById(parameter.id) + .subscribe(__data => { + for(var i = 0; i < this.ms.parameterList.length; i++){ + if(this.ms.parameterList[i].para_key == parameter.para_key + && this.ms.parameterList[i].para_value == parameter.para_value){ + this.ms.parameterList.splice(i, 1); + return; + } + } + + }, error =>{ + console.log(error); + }); + }else{ + for(var i = 0; i < this.ms.parameterList.length; i++){ + if(this.ms.parameterList[i].para_key == parameter.para_key + && this.ms.parameterList[i].para_value == parameter.para_value){ + this.ms.parameterList.splice(i, 1); + return; + } + } + } + }, error =>{ + console.log(error); + }); + } + + //Add Or Update Microservices. + saveChanges(){ + console.log("saveChanges..",this.ms); + if(this.ms && this.ms.id && this.ms.id !='undefined'){ + this.isEditMode = true; + } + var isValid = true; + + if(this.ms.name == '' + || this.ms.name == undefined){ + this.emptyServiceName = true; + isValid = false; + } + console.log("a >",isValid); + if(this.dupliateName == true){ + isValid = false; + } + console.log("b> ",isValid); + if(this.ms.desc == '' + || this.ms.desc == undefined){ + this.emptyServiceDesc = true; + isValid = false; + } + console.log("c> ",isValid); + + if(this.ms.url == '' + || this.ms.url == undefined){ + this.emptyServiceURL = true; + isValid = false; + } + console.log("d> ",isValid); + + if(this.ms.appId == undefined + || this.ms.appId == null){ + this.emptyServiceApp = true; + isValid = false; + } + + console.log("IsValid flag add/update microservices ",isValid ) + + if(!isValid) + return; + /* + * Check the parameter list, delete those parameters that don't + * have key + */ + if(this.ms && this.ms.parameterList){ + for(var i = 0; i < this.ms.parameterList.length; i++){ + if(this.ms.parameterList[i].para_key == undefined + || this.ms.parameterList[i].para_key == null + || this.ms.parameterList[i].para_key == ""){ + this.ms.parameterList.splice(i, 1); + i--; + } + } + } + if(this.ms.securityType == undefined || + this.ms.securityType == null) + this.ms.securityType = "No Authentication"; + else{ + this.ms.securityType = this.ms.securityType; + this.ms.username = this.ms.username; + this.ms.password = this.ms.password; + } + + var active = 'N'; + if(this.ms.active == true) + active = 'Y'; + + let paramList = []; + if(this.ms.parameterList && this.ms.parameterList.length >0){ + paramList = this.ms.parameterList; + } + var newService = { + name: this.ms.name, + desc: this.ms.desc, + appId: this.ms.appId, + url: this.ms.url, + securityType: this.ms.securityType, + username: this.ms.username, + password: this.ms.password, + active: active, + parameterList: paramList + }; + + if(this.isEditMode){ + console.log("Edit microservice mode called"); + this.microservice.updateService(this.ms.id , newService) + .subscribe( data => { + this.result = data; + console.log("update microservice response :: ",this.result); + this.passEntry.emit(this.result); + this.ngbModal.dismissAll(); + }, error => { + console.log(error); + this.ngbModal.dismissAll(); + }); + }else{ + console.log("Add microservice mode called") + this.microservice.createService(newService) + .subscribe( data => { + this.result = data; + console.log("add microservice response :: ",this.result); + this.passEntry.emit(this.result); + this.ngbModal.dismissAll(); + }, error => { + this.ngbModal.dismissAll(); + console.log(error); + }); + } + } +} diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.html b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.html new file mode 100644 index 00000000..45a68650 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.html @@ -0,0 +1,89 @@ +<!-- + ============LICENSE_START========================================== + ONAP Portal + =================================================================== + Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + =================================================================== + + Unless otherwise specified, all software contained herein is licensed + under the Apache License, Version 2.0 (the "License"); + you may not use this software except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + + Unless otherwise specified, all documentation contained herein is licensed + under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + you may not use this documentation except in compliance with the License. + You may obtain a copy of the License at + + https://creativecommons.org/licenses/by/4.0/ + + Unless required by applicable law or agreed to in writing, documentation + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + + ============LICENSE_END============================================ + + + --> + +<div class="container"> + <div id="microservice-onboarding-title" class="w-ecomp-main-view-title"> + <h1 class="heading-page"> Microservice Onboarding</h1> + </div> + + <mat-form-field> + <input matInput type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table"> + </mat-form-field> + + <button type="button" style="float: right;" class="btn btn-primary" (click)="openAddNewMicroserviceModal('')"> + <i class="icon ion-md-person-add"></i>Add Microservice + </button> + + <table mat-table [dataSource]="dataSource" matSort> + <!-- Microservice Name Column --> + <ng-container matColumnDef="microserviceName"> + <th id="col1" mat-header-cell *matHeaderCellDef mat-sort-header> Microservice Name </th> + <td (click)="openAddNewMicroserviceModal(element)" id="rowheader_t1_{{i}}-microserviceName" + mat-cell *matCellDef="let element; let i = index;"> {{element.name}} + </td> + </ng-container> + + <!-- Microservice serviceEndPointURL Column --> + <ng-container matColumnDef="serviceEndPointURL"> + <th id="col2" mat-header-cell *matHeaderCellDef> Service End Point URL </th> + <td (click)="openAddNewMicroserviceModal(element)" id="rowheader_t1_{{i}}-serviceEndPointURL" + mat-cell *matCellDef="let element; let i=index;"> {{element.url}} </td> + </ng-container> + + <!-- Microservice securityType Column --> + <ng-container matColumnDef="securityType"> + <th id="col2" mat-header-cell *matHeaderCellDef> Security Type </th> + <td (click)="openAddNewMicroserviceModal(element)" id="rowheader_t1_{{i}}-securityType" + mat-cell *matCellDef="let element; let i=index;"> {{element.securityType}} </td> + </ng-container> + + <!-- Delete Column --> + <ng-container matColumnDef="delete"> + <th id="col4" mat-header-cell *matHeaderCellDef> Delete </th> + <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let element; let i=index;"> + <span class="icon-trash" id="{{i}}-button-portal-admin-remove" (click)="deleteService(element)"> + <i class="icon ion-md-trash"></i> + </span> + </td> + </ng-container> + + <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> + <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> + </table> + <mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator> +</div>
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.scss b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.scss new file mode 100644 index 00000000..135fbda2 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.scss @@ -0,0 +1,46 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + +.container th{ + padding-bottom: 15px; + font-weight: bold; +} + +.ion-md-trash{ + cursor: pointer; +}
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.spec.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.spec.ts new file mode 100644 index 00000000..09d30a14 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.spec.ts @@ -0,0 +1,63 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MicroserviceOnboardingComponent } from './microservice-onboarding.component'; + +describe('MicroserviceOnboardingComponent', () => { + let component: MicroserviceOnboardingComponent; + let fixture: ComponentFixture<MicroserviceOnboardingComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MicroserviceOnboardingComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MicroserviceOnboardingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.ts new file mode 100644 index 00000000..d2d66974 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.ts @@ -0,0 +1,156 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + +import { Component, OnInit, ViewChild, Input } from '@angular/core'; +import { MicroserviceService, WidgetOnboardingService } from '../../shared/services/index' +import { IMircroservies } from 'src/app/shared/model/microservice-onboarding/microservices'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { MatTableDataSource } from '@angular/material'; +import { MatSort, MatPaginator } from '@angular/material'; +import { MicroserviceAddDetailsComponent } from './microservice-add-details/microservice-add-details.component'; +import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component'; +import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component'; + +@Component({ + selector: 'app-microservice-onboarding', + templateUrl: './microservice-onboarding.component.html', + styleUrls: ['./microservice-onboarding.component.scss'] +}) +export class MicroserviceOnboardingComponent implements OnInit { + + showSpinner = true; + microServiceList: Array<IMircroservies> = []; + result: any; + isEditMode: boolean = false; + + displayedColumns: string[] = ['microserviceName', 'serviceEndPointURL', 'securityType','delete']; + dataSource = new MatTableDataSource(this.microServiceList); + @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatPaginator) paginator: MatPaginator; + + constructor(public microservice: MicroserviceService, public ngbModal: NgbModal ) { } + + ngOnInit() { + this.getOnboardingServices(); + } + + getOnboardingServices(){ + //console.log("getOnboardingServices called"); + this.microservice.getServiceList() + .subscribe(_data => { + this.result = _data; + if (this.result == null || this.result == 'undefined') { + console.log('MicroserviceService::getServiceList Failed: Result or result.data is null'); + }else { + this.microServiceList = this.result; + this.populateTableData(this.microServiceList); + } + }, error =>{ + console.log(error); + }); + } + + deleteService(microserviceObj: IMircroservies, isConfirmed: boolean): void { + let confirmationMsg = 'You are about to delete this Microservice : ' + microserviceObj.name+ '. Click OK to continue.'; + this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => { + if (result === 'Ok') { + if(!microserviceObj || microserviceObj == null){ + console.log('MicroserviceOnboardingCtrl::deleteService: No service or ID... cannot delete'); + return; + } + //console.log("service id to delete", microserviceObj.id) + this.microServiceList.splice(this.microServiceList.indexOf(microserviceObj), 1); + this.populateTableData(this.microServiceList); + this.microservice.deleteService(microserviceObj.id) + .subscribe( data => { + this.result = data; + this.microServiceList = []; + this.getOnboardingServices(); + }, error => { + console.log(error); + }); + } + }, (resut) => { + return; + }) + } + + + openAddNewMicroserviceModal(rowData: any){ + //console.log("openAddNewMicroserviceModal getting called..."); + const modalRef = this.ngbModal.open(MicroserviceAddDetailsComponent, { size: 'lg' }); + modalRef.componentInstance.title = 'Microservice Onboarding'; + if(rowData != 'undefined' && rowData){ + modalRef.componentInstance.ms = rowData; + this.isEditMode = true; + }else{ + modalRef.componentInstance.ms = {}; + this.isEditMode = false; + } + modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => { + //console.log("receivedEntry >>> ",receivedEntry); + if(receivedEntry){ + this.microServiceList = []; + this.getOnboardingServices(); + } + }); + } + + populateTableData(microServiceList: Array<IMircroservies>){ + this.dataSource = new MatTableDataSource(microServiceList); + this.dataSource.sort = this.sort; + this.dataSource.paginator = this.paginator; + } + + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); + } + + openConfirmationModal(_title: string, _message: string) { + const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent); + modalInfoRef.componentInstance.title = _title; + modalInfoRef.componentInstance.message = _message; + } + + openInformationModal(_title: string, _message: string){ + const modalInfoRef = this.ngbModal.open(InformationModalComponent); + modalInfoRef.componentInstance.title = _title; + modalInfoRef.componentInstance.message = _message; + return modalInfoRef; + } +} |