added ansible server functionality

multiple ansible server for CDT

Issue-ID: APPC-1510
Change-Id: I383bc63705418654efb596c617309821ebbeb9b4
Signed-off-by: Mohamed Asgar Samiulla <ma926a@us.att.com>

6 files changed, 982 insertions, 0 deletions

diff --git a/src/app/admin/admin.component.css b/src/app/admin/admin.component.css
new file mode 100644
index 0000000..f6cbef3
--- /dev/null
+++ b/src/app/admin/admin.component.css
@@ -0,0 +1,34 @@
+/*
+============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============================================
+*/
+
+.build-button {
+    padding: 11px;
+    font-size: 20px;
+    color: green;
+    border: 1PX SOLID GREEN;
+    MARGIN-BOTTOM: 40PX
+}
+
+table.table th,
+table.table td {
+    padding: 0rem;
+}
\ No newline at end of file
diff --git a/src/app/admin/admin.component.html b/src/app/admin/admin.component.html
new file mode 100644
index 0000000..1185957
--- /dev/null
+++ b/src/app/admin/admin.component.html
@@ -0,0 +1,93 @@
+<!--
+============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="container" style="margin-left:-15px;" *ngIf="noData != true">
+    <table class="table">
+        <thead>
+            <tr>
+                <th>CONFIGURATION SERVER <i class="fa fa-sort" (click)="sortOrder= !sortOrder; sortBy='serverandport'" aria-hidden="true"></i></th>
+                <th>CLOUD-OWNER/CLOUD-REGION/TENANT<i class="fa fa-sort" (click)="sortOrder= !sortOrder; sortBy='ownerid'" aria-hidden="true"></i></th>
+                <th>DESCRIPTION</th>
+                <th>MODIFIER<i class="fa fa-sort" (click)="sortOrder= !sortOrder; sortBy='modifier'" aria-hidden="true"></i></th>
+                <th>DATE MODIFIED<i class="fa fa-sort" (click)="sortOrder= !sortOrder; sortBy='modified-date'" aria-hidden="true"></i></th>
+                <th></th>
+            </tr>
+        </thead>
+
+        <tbody style="padding: 5px 5px">
+            <tr *ngFor="let item of displayAnsibleServerData | orderBy:sortBy:sortOrder; let i=index">
+                <td><strong>{{item['serverandport']}}</strong></td>
+
+                <td>
+                    <table class="table">
+                        <thead></thead>
+                        <tbody style="padding: 5px 5px">
+                            <tr *ngFor="let info of item.info">
+                                <td><strong>{{info.ownerid}} / {{info.regionid}}</strong> / {{info.tenantid}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+
+                <td><strong>{{item['descr']}} </strong></td>
+
+                <td><strong>{{item['modifier']}} </strong></td>
+
+                <td><strong>{{item['modified-date']}} </strong></td>
+
+                <td>
+                    <button type="button" class="mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="viewAnbsibleServer(item,i)" style="width:100px;height:40px;">
+                                        <i class="fa fa-edit"></i> View/Edit
+                                    </button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+</div>
+
+
+<div *ngIf="noData == true" class="text-center">
+    <div class="card">
+        <div class="mdl-dialog__content">
+            <div class="mdl-card__title">
+                <h2 class="mdl-card__title-text">There is no admin Artifacts</h2>
+            </div>
+            <div class="mdl-card__supporting-text">
+                {{noDataMsg}}
+            </div>
+        </div>
+    </div>
+</div>
+<div class="col-lg-12-ln2">
+    <button type="button" (click)="createAnsibleServer()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">
+            CREATE NEW SERVER
+        </button>
+    <button type="button" (click)="download()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">
+            DOWNLOAD ALL TO PC
+        </button>
+    <button type="button" (click)="saveToAppc()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">
+            SAVE ALL TO APPC
+        </button>
+</div>
\ No newline at end of file
diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts
new file mode 100644
index 0000000..74fe86a
--- /dev/null
+++ b/src/app/admin/admin.component.ts
@@ -0,0 +1,247 @@
+/*
+============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 { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { HttpUtilService } from '../shared/services/httpUtil/http-util.service';
+import { MappingEditorService } from '../shared/services/mapping-editor.service';
+import { ParamShareService } from '../shared/services/paramShare.service';
+import { environment } from '../../environments/environment';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { NgProgress } from 'ngx-progressbar';
+import { APIService } from "../shared/services/cdt.apicall";
+import { UtilityService } from '../shared/services/utilityService/utility.service';
+import { NotificationsService } from 'angular2-notifications';
+
+
+@Component({ selector: 'admin', templateUrl: './admin.component.html', styleUrls: ['./admin.component.css']})
+export class AdminComponent implements OnInit {
+    displayAnsibleServerData: Array<Object> = [];
+    ansibleServerData;
+    sortOrder = false;
+    noData = false;
+    sortBy: string;
+    filter: Object = {};
+    noDataMsg: string;
+    errorMessage = '';
+    invalid = true;
+    currentUser;
+    fileName = "ansible_admin_FQDN_Artifact_0.0.1V.json";
+
+    options = {
+        timeOut: 4000,
+        showProgressBar: true,
+        pauseOnHover: true,
+        clickToClose: true,
+        maxLength: 200
+    };
+
+    constructor (
+        private paramShareService: ParamShareService,
+        private ngProgress: NgProgress,
+        private httpUtil: HttpUtilService,
+        private router: Router,
+        private activeROute: ActivatedRoute,
+        private mappingEditorService: MappingEditorService,
+        private modalService: NgbModal,
+        private apiService:APIService,
+        private utilService: UtilityService,
+        private nService: NotificationsService
+        ) {
+    }
+
+    ngOnInit() {
+        const apiToken = localStorage['apiToken'];
+        this.currentUser = localStorage['userId'];
+
+        if(this.paramShareService.ansibleServerData) {
+            this.ansibleServerData = this.paramShareService.ansibleServerData;
+            console.log("cached ansibleServerData===>"+JSON.stringify(this.ansibleServerData));
+            this.formatRawData();
+        } else {
+            //testing
+            //this.ansibleServerData = "{\"fqdn-list\":[{\"vnf-management-server-fqdn\": \"fqdn-value1:url\:port\",\"cloud-owner-list\":[{\"cloud-owner\": \"owner1\",\"region-id-list\": [{\"region-id\": \"regiodnid1\",\"tenant-id-list\": [\"tenantid1\",\"tenantid2\"]},{\"region-id\": \"regiondid2\",\"tenant-id-list\": [\"tenantid1\",\"tenantid2\"]}]},{\"cloud-owner\": \"owner2\",\"region-id-list\": [{\"region-id\": \"regionid1\",\"tenant-id-list\": [\"tenantid1\",\"tenantid2\"]}]}],\"description\": \"fqdn for east zone vUSP Production\",\"username\": \"albino attuid\",\"create-date\": \"\",\"modify-username\": \"Asgar\",\"modify-date\": \"10/26/2018\"}]}";
+            //this.ansibleServerData = JSON.parse(this.ansibleServerData);
+            //this.formatRawData();
+            this.getArtifacts();
+        }
+        
+    }
+
+    getArtifacts() {
+
+         const input = {
+            "input":{
+                "design-request":{
+                    "request-id":localStorage['apiToken'],
+                    "action":"getArtifact",
+                    "payload":"{\"vnf-type\":\"NULL\",\"vnfc-type\":\"NULL\",\"protocol\":\"\",\"incart\":\"N\",\"action\":\"NULL\",\"artifact-name\":\""+this.fileName+"\",\"artifact-type\":\"APPC-CONFIG\",\"userID\":\"admin\"}"
+                }
+            }
+        };
+        //const x = JSON.parse(data.input['design-request']['payload']);
+        //x.userID = localStorage['userId'];
+        //data.input['design-request']['payload'] = JSON.stringify(x);
+         console.log("input to payload====", JSON.stringify(input));
+
+        this.ngProgress.start();
+      
+        this.apiService.callGetArtifactsApi(input).subscribe(data => {
+          
+            if( this.utilService.checkResult(data)) {
+                console.log("response===>"+JSON.stringify(data));
+                this.ansibleServerData = JSON.parse(data.output.data.block).artifactInfo[0]["artifact-content"];
+                this.ansibleServerData = JSON.parse(this.ansibleServerData);
+                console.log("ansibleServerData===>"+JSON.stringify(this.ansibleServerData))
+                this.paramShareService.ansibleServerData = this.ansibleServerData;
+                this.formatRawData();
+            } 
+            this.ngProgress.done();
+        },
+        error => {
+          
+          this.nService.error('Error',
+            'Error in connecting to APPC Server', this.options );
+        });
+       
+       
+    }
+
+    formatRawData(){
+        this.displayAnsibleServerData = [this.ansibleServerData["fqdn-list"].length];
+        console.log("length==>"+this.ansibleServerData["fqdn-list"].length)
+        for(let i=0;i<this.ansibleServerData["fqdn-list"].length;i++) {
+            let fqdl = this.ansibleServerData["fqdn-list"][i];
+            this.displayAnsibleServerData[i] = {};
+            let cloudInfoArray = [];
+            let serverAndPort = fqdl["vnf-management-server-fqdn"];
+            this.displayAnsibleServerData[i]['serverandport'] = serverAndPort;
+            let splitArray = serverAndPort.split(":");
+            let regEx = new RegExp(":"+splitArray[splitArray.length-1]+"$", "g");
+            this.displayAnsibleServerData[i]['server'] = serverAndPort.replace(regEx, "");
+            this.displayAnsibleServerData[i]['port'] = "";
+            if(splitArray.length > 1) {
+                this.displayAnsibleServerData[i]['port'] = splitArray[splitArray.length-1];
+            }
+            let clouditem = "";
+            for(let j=0; j<fqdl["cloud-owner-list"].length;j++) {
+                let cloudOwnerItem = fqdl["cloud-owner-list"][j];
+                let cloud = cloudOwnerItem["cloud-owner"];
+                let cloudrow;
+                let ownerid = cloud;
+                
+                for(let k=0; k<cloudOwnerItem["region-id-list"].length; k++) {
+                    let regionItem = cloudOwnerItem["region-id-list"][k];
+                    let regionrow = cloud + " / " + regionItem["region-id"];
+                    let regionid = regionItem["region-id"];
+                    console.log("regionrow : "+regionrow);
+                    for(let m=0; m<regionItem["tenant-id-list"].length; m++) {
+                        cloudrow = regionrow + " / " + regionItem["tenant-id-list"][m]+"\n";
+                        console.log("cloudrow : "+cloudrow);
+                        clouditem = clouditem + cloudrow;
+                        console.log("clouditem : "+clouditem);
+                        let tenantid = regionItem["tenant-id-list"][m];
+                        cloudInfoArray.push({"ownerid": ownerid, "regionid": regionid, "tenantid": tenantid});
+                        console.log("info===>"+JSON.stringify({"ownerid": ownerid, "regionid": regionid, "tenantid": tenantid}))
+                    }
+                
+                }
+                
+            }
+            console.log("info array==>"+JSON.stringify(cloudInfoArray))
+            this.displayAnsibleServerData[i]["info"] = cloudInfoArray;
+            this.displayAnsibleServerData[i]["cloud"] = clouditem;
+            this.displayAnsibleServerData[i]["descr"] = fqdl["description"];
+            this.displayAnsibleServerData[i]["creator"] = fqdl["username"];
+            this.displayAnsibleServerData[i]["created-date"] = fqdl["create-date"];
+            this.displayAnsibleServerData[i]["modifier"] = fqdl["modify-username"];
+            this.displayAnsibleServerData[i]["modified-date"] = fqdl["modify-date"];
+
+        }
+    }
+
+
+
+    viewAnbsibleServer(selectedConfig, updateIndex) {
+        sessionStorage.setItem('updateIndex', updateIndex);
+        sessionStorage.setItem('ansibleserver', JSON.stringify(selectedConfig));
+
+        this
+            .router
+            .navigate(['../ansible-server'], {
+                relativeTo: this.activeROute
+            });
+    }
+
+    createAnsibleServer() {
+        let newServer = {"server":"","port":"","info":[],"cloud":"","descr":"","creator":this.currentUser,"created-date":this.utilService.getDate(),"modifier":"","modified-date":""};
+        sessionStorage.setItem('ansibleserver', JSON.stringify(newServer));
+        
+        if(this.ansibleServerData) {
+            sessionStorage.setItem('updateIndex', this.ansibleServerData["fqdn-list"].length);
+        } else {
+            sessionStorage.setItem('updateIndex', '0');
+        }
+
+        this
+            .router
+            .navigate(['../ansible-server'], {
+                relativeTo: this.activeROute
+            });
+    }
+
+   
+    saveToAppc() {
+        let artifactContent = this.utilService.appendSlashes(JSON.stringify(this.paramShareService.ansibleServerData));
+        let input = {
+                "input": {
+                    "design-request": {
+                        "request-id": localStorage['apiToken'],
+                        "action": "uploadAdminArtifact",
+                        "payload": "{\"userID\": \"admin\",\"vnf-type\" : \"NULL \",\"action\" : \"NULL\",\"artifact-name\" : \""+this.fileName+"\",\"artifact-type\" : \"APPC-CONFIG\",\"artifact-version\" : \"0.1\",\"artifact-contents\":\""+artifactContent+"\"}",
+                    }
+                }
+            }
+        let response = this.apiService.callGetArtifactsApi(input);
+        response.subscribe(response => {
+          this.utilService.processApiSubscribe(response, this.utilService.putAction, "admin artifact");
+          //this.clearCache();
+        },
+        error => this.utilService.processApiError());
+    }
+
+    // ngOnDestroy() {
+    //     console.log("destry....")
+    // }
+
+    clearCache() {
+        this.paramShareService.ansibleServerData = undefined;
+        sessionStorage.removeItem('ansibleserver');
+    }
+
+    download() {
+        if(this.ansibleServerData){
+            this.utilService.downloadArtifactToPc(JSON.stringify(this.ansibleServerData, null, '\t'), "json", this.fileName, 100)
+        }
+    }
+
+}
\ No newline at end of file
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;
+    }
+
+
+}