diff options
Diffstat (limited to 'src/app/admin/view-edit')
| -rw-r--r-- | src/app/admin/view-edit/ansible-server.component.css | 143 | ||||
| -rw-r--r-- | src/app/admin/view-edit/ansible-server.component.html | 139 | ||||
| -rw-r--r-- | src/app/admin/view-edit/ansible-server.component.ts | 326 |
3 files changed, 608 insertions, 0 deletions
diff --git a/src/app/admin/view-edit/ansible-server.component.css b/src/app/admin/view-edit/ansible-server.component.css new file mode 100644 index 0000000..1d4f6c0 --- /dev/null +++ b/src/app/admin/view-edit/ansible-server.component.css @@ -0,0 +1,143 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2018 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. + +============LICENSE_END============================================ +*/ + +.form-group { + padding: 5px +} + +.panel { + margin-top: 20px; +} + +.form-control { + width: 100%; +} + +.panel-header { + padding: 20px 0px; +} + +.container { + border-radius: 0.375rem; + transition: all 0.3s ease; + padding: 40px; +} + +.container2 { + box-shadow: -4px 14px 20px 0px rgba(46, 61, 73, 0.15); + border-radius: 0.375rem; + transition: all 0.3s ease; + padding: 10px; + margin-top: 57px; +} + +.error-message { + color: red; +} + +.warning-message { + color: rgb(255,191,0); +} + +.create-wrapper { + text-align: left; +} + +.removevnfcClass { + text-align: right; +} + +.form-custom-group { + margin-bottom: 0; + vertical-align: middle; +} + +.side-by-side { + position: relative; +} + +.sidebtn { + position: absolute; + left: 26.5em; + top: 0em; +} + +.clear-control { + margin: 40px 20px; + display: inherit; +} + +.short-column { + width: 100px; +} + +.long-column { + width: 200px; +} + +th, +td { + min-width: 150px; +} + +.headlinesInBold { + font-weight: bold; +} + +.titleCustom { + padding-left: 25px; + overflow: visible; +} + +.anchorHover { + cursor: pointer; +} + +.custom-btn { + margin-top: 20px; + margin-bottom: 10px; +} + +.clear-btn { + margin-top: 23px; +} + +.col-md-button { + margin: auto; + margin-right: 20px; + text-align: center; + margin-bottom: 15px; +} + +.selectedAction { + /* change here */ + font-weight: bold; + color: #1A86E4 +} + +.file { + visibility: hidden; + position: absolute; +} + +.col-md-1point5 {width: 12%} +.col-md-2point5 {width: 21%;}
\ No newline at end of file diff --git a/src/app/admin/view-edit/ansible-server.component.html b/src/app/admin/view-edit/ansible-server.component.html new file mode 100644 index 0000000..a8f2137 --- /dev/null +++ b/src/app/admin/view-edit/ansible-server.component.html @@ -0,0 +1,139 @@ +<!-- +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2018 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. + +============LICENSE_END============================================ +--> + +<simple-notifications [options]="options"></simple-notifications> +<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" [speed]="200" [showSpinner]="false" [direction]="'leftToRightIncreased'" [color]="'#6ab344'" [trickleSpeed]="250" [thick]="true" [ease]="'linear'"></ng-progress> + <div class="card"> + + <div class="card-block" style=" border-top: 5px solid #6ab344; border-top-right-radius: 7px;border-top-left-radius: 7px;"> + <div class="row" style="padding: 15px 25px"> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>Configuration Server FQDN *</label> + <input type="text" value={{item.server}} class="form-control" id="txtServer" [(ngModel)]="item.server" name="server" (ngModelChange)="validateFdqn($event)"> + <span class="error-message">{{errorMessage}}</span><span class="warning-message">{{warningMessage}}</span> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>Port *</label> + <input type="text" value={{item.port}} class="form-control" id="txtPort" [(ngModel)]="item.port" name="port" (ngModelChange)="validatePort($event)"> + <span class="error-message">{{porterrorMessage}}</span><span class="warning-message">{{portwarningMessage}}</span> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>Description </label> + <input type="text" class="form-control" id="txtDescr" [(ngModel)]="item.descr" #descr="ngModel" name="descr"> + </div> + </div> + <div class="row" style="padding: 15px 25px"> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>Creator </label> + <input type="text" readonly class="form-control" id="txtCreator" [(ngModel)]="item.creator" #creator="ngModel" name="creator"> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>Date Created</label> + <input type="text" readonly class="form-control" id="txtCreatedDate" name="created-date" value="{{item['created-date'].toString()}}"> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>Modifier </label> + <input type="text" readonly class="form-control" id="txtModifier" [(ngModel)]="item.modifier" #modifier="ngModel" name="modifier"> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>Date Modified </label> + <input type="text" readonly class="form-control" id="txtModifiedDate" name="modified-date" value="{{item['modified-date'].toString()}}"> + </div> + + </div> + + </div> + <div class="card-block" style="padding: 10px"> + <div> + <div class="create-wrapper" style="padding: 0px 25px"> + + <div class="row"> + <div class="col-12"> + + + <div class="row" > + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">Cloud-Owner</label> + <input type="text" class="form-control" id="sampleowner" [(ngModel)]="sample['ownerid']" #sampleOwner="ngModel" name="sampleowner"> + <span class="error-message">{{ownerIdErrMsg}}</span> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label style="font-size:12px">Cloud-Region-ID</label> + <input type="text" class="form-control" id="sampleregionid" [(ngModel)]="sample['regionid']" #sampleRegionId="ngModel" name="sampleregionid"> + <span class="error-message">{{regionIdErrMsg}}</span> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label style="font-size:12px">Tenant ID</label> + <input type="text" class="form-control" id="sampletenantid" [(ngModel)]="sample['tenantid']" #sampleTenantId="ngModel" name="sampletenantid"> + <span class="error-message">{{tenantIdErrMsg}}</span> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label style="font-size:12px"></label> + <div class="form-group"> + <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" (click)="addInfo()">Add </button> + </div> + </div> + </div> + <div class="row" > + <span class="error-message">{{zeroTenantIdsErrorMsg}}</span> + </div> + + <div *ngIf="item.info?.length>0"> + <div class="row" *ngFor="let info of item.info;trackBy:trackByFn; let j=index"> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">Cloud-Owner</label> + <input type="text" class="form-control" id="ownerid{{j}}" [(ngModel)]="info['ownerid']" name="ownerid{{j}}"> + <div *ngIf="info['ownerid'].length==0"><span class="error-message">Enter Owner ID</span></div> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label style="font-size:12px">Cloud-Region-ID</label> + <input type="text" class="form-control" id="regionid{{j}}" [(ngModel)]="info['regionid']" name="regionid{{j}}"> + <div *ngIf="info['regionid'].length==0"><span class="error-message">Enter Region ID</span></div> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label style="font-size:12px">Tenant ID</label> + <input type="text" class="form-control" id="tenantid{{j}}" [(ngModel)]="info['tenantid']" name="tenantid{{j}}"> + <div *ngIf="info['tenantid'].length==0"><span class="error-message">Enter Tenant ID</span></div> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label style="font-size:12px"> </label> + <div class="form-group"> + <a role="button" style="color: white" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="removeInfo(j)">Remove</a> + </div> + </div> + </div> + </div> + + </div> + </div> + + <div class="row justify-content-end" style="padding: 15px 25px"> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <a role="button" style="color: white" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="cancel()">Cancel</a> + <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="validate()" >Return</button> + </div> + </div> + + </div> + </div> + </div> + </div> diff --git a/src/app/admin/view-edit/ansible-server.component.ts b/src/app/admin/view-edit/ansible-server.component.ts new file mode 100644 index 0000000..b629b65 --- /dev/null +++ b/src/app/admin/view-edit/ansible-server.component.ts @@ -0,0 +1,326 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2018 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. + +============LICENSE_END============================================ +*/ + +import * as XLSX from 'xlsx'; +import * as _ from 'underscore'; + +import { ActivatedRoute, Router } from '@angular/router'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { UtilityService } from '../../shared/services/utilityService/utility.service'; + +// Common Confirm Modal +import { DialogService } from 'ng2-bootstrap-modal'; +import { ParamShareService } from '../../shared/services/paramShare.service'; + + +declare var $: any; +type AOA = Array<Array<any>>; + +@Component({ + selector: 'ansible-server', + templateUrl: './ansible-server.component.html', + styleUrls: ['./ansible-server.component.css'], +}) +export class AnsibleServerComponent implements OnInit { + + //settings for the notifications. + options = { + timeOut: 4500, + showProgressBar: true, + pauseOnHover: true, + clickToClose: true, + maxLength: 200 + }; + + public ownerIdErrMsg; + public regionIdErrMsg; + public tenantIdErrMsg + public zeroTenantIdsErrorMsg; + public porterrorMessage; + public portwarningMessage; + public errorMessage; + public warningMessage; + public invalid = true; + public portinvalid = true; + public item; + public sample = {ownerid:"", regionid:"", tenantid:""}; + public updateIndex; + public currentUser; + constructor( + private paramShareService: ParamShareService, + private router: Router, + private activeROute: ActivatedRoute, + private utilService: UtilityService + + ) + { + console.log("testing...."); + } + +ngOnInit() { + this.currentUser = localStorage['userId']; + this.item = JSON.parse(sessionStorage.getItem("ansibleserver")); + this.updateIndex = parseInt(sessionStorage.getItem("updateIndex")); + console.log("index===>"+this.updateIndex); + if(!this.paramShareService.ansibleServerData) { + this.invalid = true; + } else { + this.invalid = false; + } + console.log("selecteditem===>"+JSON.stringify(this.item)); +} + +addInfo() { + console.log("selectediteminfo===>"+JSON.stringify(this.item.info)); + if(this.validateTenantId()) { + this.item.info.push(this.sample) + this.sample = {ownerid:"", regionid:"", tenantid:""}; + this.zeroTenantIdsErrorMsg = ""; + } + +} + +removeInfo(index) { + console.log("selectediteminfo===>"+index+JSON.stringify(this.item.info)); + this.item.info.splice(index, 1); + console.log("selectediteminfo===>"+JSON.stringify(this.item.info)); + +} + +// save() { +// console.log("ansibleServerData===>"+ JSON.stringify(this.paramShareService.ansibleServerData)) +// let ansibleServer = this.createAnsibleserverData(this.item); +// this.paramShareService.ansibleServerData["fqdn-list"].push(ansibleServer); +// this.router.navigate(['../admin'], { +// relativeTo: this.activeROute +// }); +// } + +update() { + console.log("ansibleServerData===>"+ JSON.stringify(this.paramShareService.ansibleServerData)) + + + let ansibleServer = this.createAnsibleserverData(this.item); + //need to revisit to initialize paramShareService.ansibleServerData + if(!this.paramShareService.ansibleServerData) { + this.paramShareService.ansibleServerData = {"fqdn-list" : []}; + } + if(this.updateIndex != this.paramShareService.ansibleServerData["fqdn-list"].length) { + ansibleServer["modify-username"] = this.currentUser; + ansibleServer["modify-date"] = this.utilService.getDate(); + console.log("update........") + } + this.paramShareService.ansibleServerData["fqdn-list"][this.updateIndex] = ansibleServer; + this.router.navigate(['../admin'], { + relativeTo: this.activeROute + }); + + +} + +cancel() { + sessionStorage.removeItem("ansibleserver"); + this.router.navigate(['../admin'], { + relativeTo: this.activeROute + }); +} + +createAnsibleserverData(displayAnsibleServer){ + let cloudOwnerList = this.createCloudOwnerList(displayAnsibleServer); + let anisble = { + "vnf-management-server-fqdn": displayAnsibleServer.server+":"+displayAnsibleServer.port, + "cloud-owner-list":cloudOwnerList, + "description":displayAnsibleServer.descr, + "username":displayAnsibleServer.creator, + "create-date":displayAnsibleServer['created-date'], + "modify-username":displayAnsibleServer.modifier, + "modify-date":displayAnsibleServer['modified-date'] + }; + return anisble; + +} + +createCloudOwnerList(displayAnsibleServer) { + let cloudOwnerList = []; + + //prepare unique cloud-owner + for(let i=0; i<displayAnsibleServer.info.length; i++) { + let info = displayAnsibleServer.info[i]; + let cloudOwner = {}; + cloudOwner["cloud-owner"] = info.ownerid; + let exist = false; + cloudOwnerList.forEach(element => { + if(element["cloud-owner"] == info.ownerid) { + exist = true; + + } + }); + if(!exist){ + cloudOwnerList.push(cloudOwner); + } + + } + console.log("cloudOwnerList===>"+JSON.stringify(cloudOwnerList)); + + //prepare region id + cloudOwnerList.forEach(cloudOwner => { + let regionIdList = []; + for(let i=0; i<displayAnsibleServer.info.length; i++) { + let info = displayAnsibleServer.info[i]; + if(cloudOwner["cloud-owner"] == info.ownerid) { + let exist = false; + regionIdList.forEach(element => { + if(element["region-id"] == info.regionid) { + exist = true; + } + }); + if(!exist){ + regionIdList.push({"region-id":info.regionid}); + } + } + + } + cloudOwner["region-id-list"] = regionIdList; + }); + + console.log("cloudOwnerList===>"+JSON.stringify(cloudOwnerList)); + + //prepare tenant id + cloudOwnerList.forEach(cloudOwner => { + cloudOwner["region-id-list"].forEach(regionid => { + let teanantIdList = []; + for(let i=0; i<displayAnsibleServer.info.length; i++) { + let info = displayAnsibleServer.info[i]; + if(cloudOwner["cloud-owner"] == info.ownerid && regionid["region-id"] == info.regionid) { + let exist = false; + teanantIdList.forEach(element => { + if(element == info.tenantid) { + exist = true; + } + }); + if(!exist){ + teanantIdList.push(info.tenantid); + } + } + + } + regionid["tenant-id-list"] = teanantIdList; + }); + }); + console.log("cloudOwnerList===>"+JSON.stringify(cloudOwnerList)); + return cloudOwnerList; + } + + //validating the fdqn url + validateFdqn(fdqn) { + if (fdqn.trim().length < 1) { + this.errorMessage = 'Please enter Configuration Server FQDN'; + this.warningMessage = ''; + this.invalid = true; + } else if (fdqn.startsWith(' ') || fdqn.endsWith(' ')) { + this.errorMessage = 'Leading and trailing spaces are not allowed'; + this.warningMessage = ''; + this.invalid = true; + } else if (!(fdqn.startsWith('http') || fdqn.endsWith('https'))) { + this.warningMessage = 'FDQN can start with eighther http or https protocol'; + this.errorMessage = ''; + this.invalid = false; + + // } else if (name.includes(' ')) { + // this.errorMessage = 'More than one space is not allowed in VNFC Type'; + // this.invalid = true; + // } else if (name.length > 50) { + // this.errorMessage = 'VNFC Type should be of minimum one character and maximum 50 character'; + // this.invalid = true; + // + } else { + this.invalid = false; + this.errorMessage = ''; + this.warningMessage = ''; + } + } + + //validating the port + validatePort(port) { + if (port.trim().length < 1) { + this.porterrorMessage = 'Please enter port'; + this.portwarningMessage = ''; + this.invalid = true; + } else if (port.startsWith(' ') || port.endsWith(' ')) { + this.porterrorMessage = 'Leading and trailing spaces are not allowed'; + this.portwarningMessage = ''; + this.invalid = true; + + } else if (isNaN(port)) { + this.portwarningMessage = ''; + this.porterrorMessage = 'Port should be a number'; + this.invalid = true; + port = parseInt(port); + } else if (!(0 <= port && port <= 65535 )) { + this.portwarningMessage = 'Port should be a number in range of 0 to 65535'; + this.porterrorMessage = ''; + this.invalid = false; + } else { + this.invalid = false; + this.porterrorMessage = ''; + this.portwarningMessage = ''; + } + } + + validate() { + this.validateFdqn(this.item.server); + this.validatePort(this.item.port); + if(this.item.info.length <= 0) { + this.zeroTenantIdsErrorMsg = "Please add atleast one Tenant ID."; + this.invalid = true; + } + if(!this.invalid) { + this.update(); + } + } + + validateTenantId(){ + let valid = true; + if(this.sample.ownerid.trim().length == 0) { + this.ownerIdErrMsg = "Enter OwnerID"; + valid = false; + } else { + this.ownerIdErrMsg = ""; + } + if(this.sample.regionid.trim().length == 0) { + this.regionIdErrMsg = "Enter RegionID"; + valid = false; + } else { + this.regionIdErrMsg = ""; + } + if(this.sample.tenantid.trim().length == 0) { + this.tenantIdErrMsg = "Enter TenantID"; + valid = false; + } else { + this.tenantIdErrMsg = ""; + } + return valid; + } + + +} |