diff options
6 files changed, 442 insertions, 211 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts index 8ea51321..7d0e2986 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -44,60 +44,80 @@ export class CcvpnCreationComponent implements OnInit { "margin": "0", "border-radius": "4px 4px 0px 0px" }; - templateParameters = {}; - getTemParameters(){ //Get template parameters - let chosedtemplates = Object.values(this.createParams.templates); - // console.log(this.createParams); - console.log(chosedtemplates); //Template id array - if(this.createParams.commonParams.templateType == 'SOTN'){ - this.tabBarStyle["width"]="351px"; + templateParameters={ + service:{}, + sotnvpn:{ + info:{}, + sdwanvpnresource_list:[], + sdwansitelan_list:[] + }, + site:{ + info:{}, + sdwansiteresource_list:[], + sdwandevice_list:[], + sdwansitewan_list:[] } - let types = ["sotnvpn","site","sdwanvpn"]; - chosedtemplates.forEach((item,index)=>{ - this.myhttp.getTemplateParameters(types[index],item) - .subscribe((data)=>{ - if(index === 0){ - this.templateParameters["sotnvpn"] = data; - this.sotnNames = data.inputs.map((item)=>{return item.name}); //The real name of the cloud - }else if(index === 1){ - this.templateParameters["site"] = data; - let wanportnames = {}; - this.siteNames = data.inputs.map((item)=>{return item.name}); //All the real names in the site, no grouping, put together - this.siteNames.forEach((item)=>{ - if(item.includes("_device_")){ - this.siteCpeNames.push(item); - }else if(item.includes("_sitewanport_")){ - let firstName = item.split("_")[0]; - wanportnames[firstName]?wanportnames[firstName].push(item):wanportnames[firstName]=[item]; - }else { - this.siteBaseNames.push(item); - } - }) - this.siteWanNames = Object.values(wanportnames); - this.siteWanNames.forEach((item)=>{ - this.siteWanData.push(Object.assign({},this.siteWanParams)); //Add a table according to the wanport group - }) - this.siteWanData.forEach((item,index) => { - item.indexs=index; - }); - console.log(this.siteWanData) - // console.log(this.sotnNames) - // console.log(this.siteNames) - // console.log(this.siteBaseNames) - // console.log(this.siteCpeNames) - // console.log(this.siteWanNames) - // console.log(this.siteWanData) - }else if(index === 2){ - this.templateParameters["sdwan"] = data; - this.siteGroupNames = data.inputs.map((item)=>{return item.name}); //sdwanvpn Real name - // console.log(this.siteGroupNames); - } - - },(err)=>{ - - }) - }) + }; + getTemParameters() { //获取模板参数 + let chosedtemplates = this.createParams.template; + let types = this.createParams.commonParams.templateType; + console.log(this.createParams); + console.log(chosedtemplates); //模板id数组 + if (types == 'SOTN') { + this.tabBarStyle["width"] = "351px"; + } + this.myhttp.getTemplateParameters(types, chosedtemplates) + .subscribe((data) => { + let inputs=data["inputs"]; + let vnfs=data["vnfs"]; + this.templateParameters.service={ + serviceInvariantUuid:data.metadata.invariantUUID, + serviceUuid:data.metadata.UUID + }; + vnfs.map((item) => { //将sotnvpn和site的基本信息添加进来 + if( item["vnf_id"]=='sdwanvpnresource'){ + this.templateParameters["sotnvpn"]["info"]={resourceName: item["vnf_id"], min:item.properties["min_instances"],resourceInvariantUuid: item.metadata["invariantUUID"], resourceUuid: item.metadata["UUID"],resourceCustomizationUuid: item.metadata["customizationUUID"]} + } + if(item["vnf_id"]=='sdwansiteresource'){ + this.templateParameters["site"]["info"]={resourceName: item["vnf_id"], min:item.properties["min_instances"],resourceInvariantUuid: item.metadata["invariantUUID"], resourceUuid: item.metadata["UUID"],resourceCustomizationUuid: item.metadata["customizationUUID"]} + } + }); + + //筛选 分离 sotnvpn数据 + inputs["sdwanvpnresource_list"].map((item,index) => { + if(item["required"] !=undefined){ + this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(item); + } + if(item["sdwansitelan_list"] !=undefined && item["sdwansitelan_list"] instanceof Array === true){ + console.log(item) + this.templateParameters["sotnvpn"]["sdwansitelan_list"]=item["sdwansitelan_list"] + } + }); + + //筛选 分离 site数据 + inputs["sdwansiteresource_list"].map((item,index) => { + if(item["required"] !=undefined){ + this.templateParameters["site"]["sdwansiteresource_list"].push(item); + } + if(item["sdwandevice_list"] !=undefined && item["sdwandevice_list"] instanceof Array === true){ + console.log(item) + this.templateParameters["site"]["sdwandevice_list"]=item["sdwandevice_list"] + } + if(item["sdwansitewan_list"] !=undefined && item["sdwansitewan_list"] instanceof Array === true){ + console.log(item) + this.templateParameters["site"]["sdwansitewan_list"]=item["sdwansitewan_list"] + } + }); + console.log( this.templateParameters) + + + + + + }, (err) => { + + }); } // SOTN VPN Info Input parameters sotnInfo = { @@ -581,8 +601,8 @@ export class CcvpnCreationComponent implements OnInit { service:{ name:this.sotnInfo.name, description:this.sotnInfo.description, - serviceInvariantUuid:this.templateParameters["sotnvpn"].invariantUUID, //template.invariantUUID, //serviceDefId - serviceUuid:this.templateParameters["sotnvpn"].uuid, //template.uuid, // uuid ?? templateId + // serviceInvariantUuid:this.templateParameters["sotnvpn"].invariantUUID, //template.invariantUUID, //serviceDefId + // serviceUuid:this.templateParameters["sotnvpn"].uuid, //template.uuid, // uuid ?? templateId globalSubscriberId:globalCustomerId, //customer.id serviceType:globalServiceType, //serviceType.value parameters:{ @@ -629,8 +649,8 @@ export class CcvpnCreationComponent implements OnInit { service:{ name:site.baseData.name, description:site.baseData.description, - serviceInvariantUuid:this.templateParameters["site"].invariantUUID, - serviceUuid:this.templateParameters["site"].uuid, + // serviceInvariantUuid:this.templateParameters["site"].invariantUUID, + // serviceUuid:this.templateParameters["site"].uuid, globalSubscriberId:globalCustomerId, serviceType:globalServiceType, parameters:{ diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts index ddf40de7..0f016a0c 100644 --- a/usecaseui-portal/src/app/myhttp.service.ts +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -22,7 +22,7 @@ import { homeData, homeVmLineData, servicesSelectData, servicesTableData, create export class MyhttpService { constructor(private http: HttpClient) { } - baseUrl = baseUrl.baseUrl + baseUrl = baseUrl.baseUrl; url = { listSortMasters:this.baseUrl+"/listSortMasters", customers: this.baseUrl + "/uui-lcm/customers", @@ -30,7 +30,7 @@ export class MyhttpService { serviceType: this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions", servicesTableData: this.baseUrl + '/uui-lcm/service-instances', serviceTemplates: this.baseUrl + "/uui-lcm/service-templates", - templateParameters: this.baseUrl + "/uui-lcm/service-templates/" + "*_*" + "?toscaModelPath=", + templateParameters: this.baseUrl + "/uui-lcm/fetchTemplateInfo", nstemplateParameters: this.baseUrl + "/uui-lcm/fetchNsTemplateData", vimInfo: this.baseUrl + "/uui-lcm/locations/", sdnControllers: this.baseUrl + "/uui-lcm/sdnc-controllers/", @@ -101,8 +101,12 @@ export class MyhttpService { } return this.http.post<any>(this.url.nstemplateParameters, body); } - let url = this.url.templateParameters.replace("*_*", template.uuid) + template.toscaModelURL; - return this.http.get<any>(url); + let body = { + csarId: template.id, + packageType: "", + inputs: "" + }; + return this.http.post<any>(this.url.templateParameters, body); } // siteAddress address getSiteAddress() { diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html index c09b15be..bb8e5140 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -40,22 +40,24 @@ <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> Create </span> </button> - <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="TEMPLATE" (nzOnCancel)="handleCancel()" - (nzOnOk)="handleOk()"> + <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="Service Creation" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"> <div class="select-list"> - <span style="display:inline-block;">Customer: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear> + <span style="display:inline-block;">CUSTOMER: </span> + + + <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear (ngModelChange)="customerChange()"> <nz-option *ngFor="let item of customerList2" [nzValue]="item.name" [nzLabel]="item.name"></nz-option> </nz-select> </div> - <div class="select-list"> - <span style="display:inline-block;">Service Type: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelected2.name" nzAllowClear> + <div class="select-list"> + <span style="display:inline-block;">SERVICE TYPE: </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear> <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name" [nzLabel]="item.name" ></nz-option> </nz-select> </div> - <div class="select-list"> - <span style="display:inline-block;">Service: </span> + <div class="select-list"> + <span style="display:inline-block;">Use Case: </span> <nz-select style="width: 176px;float: right;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()"> <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> --> @@ -65,30 +67,12 @@ <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option> </nz-select> </div> - - <div *ngIf="templateTypeSelected == 'SOTN'||templateTypeSelected == 'CCVPN'"> - <div class="select-list"> - <span style="display:inline-block;">SOTN VPN: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear> - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - <div class="select-list"> - <span style="display:inline-block;"> SITE: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="template2" nzAllowClear> - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - <div *ngIf="templateTypeSelected == 'CCVPN'"> - <div class="select-list"> - <span style="display:inline-block;">SD-WAN: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="template3" nzAllowClear> - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - </div> + <div class="select-list"> + <span style="display:inline-block;width:70px;">TEMPLATE: </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear> + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> </div> - <div *ngIf="templateTypeSelected == 'E2E Service'"> <div class="select-list"> <span style="display:inline-block;width:70px;">Orchestrator: </span> @@ -97,18 +81,10 @@ </nz-select> </div> </div> - <div *ngIf="templateTypeSelected == 'E2E Service'||templateTypeSelected == 'Network Service'"> - <div class="select-list"> - <span style="display:inline-block;width:70px;">TEMPLATE: </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="template4" nzAllowClear> - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - </div> <div *ngIf="templateTypeSelected == 'E2E Service'"> <div class="check-box" style="margin:30px; height: 50px"> <input class="check-box-style" style="zoom: 1.8; width: 70px" type="checkbox" [(ngModel)]="isSol005Interface" value="true" nzAllowClear> - <label class="label" style="font-size: 20px; color: rgb(60,79,140,.5)">Sol005</label> + <label class="label" style="font-size: 20px; color: rgb(60,79,140,0.5)">Sol005</label> </div> </div> </nz-modal> @@ -119,7 +95,7 @@ <span class="round">{{item.serviceDomain}}</span> <div class="top-list-text"> <span>{{item.number}}</span><br> - <span>{{item.serviceDomain}} Service Instances</span> + <span>{{item.detailName}}</span> </div> </li> </ul> @@ -142,9 +118,9 @@ <tr> <th nzWidth="5%">NO</th> <th nzWidth="5%"></th> - <th nzWidth="20%">Service Instance Id</th> <th nzWidth="20%">Name</th> - <th nzWidth="15%">Service</th> + <th nzWidth="20%">Description</th> + <th nzWidth="15%">Use Case</th> <th nzWidth="20%">Status</th> <th nzWidth="15%">Action</th> </tr> @@ -154,8 +130,8 @@ <tr> <td>{{pageSize*(pageIndex-1) + i+1}}</td> <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td> - <td>{{data["service-instance-id"] || data.nsInstanceId}}</td> <td>{{data["service-instance-name"] || data.nsName}}</td> + <td>{{data["service-instance-id"] || data.nsInstanceId}}</td> <td> <p [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN','voLTEColor':data.serviceDomain=='voLTE type'}"> {{data.serviceDomain}} @@ -217,63 +193,90 @@ </nz-table> <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" - (nzOnOk)="scaleOk()"> - <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance? - </h3> - Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || - thisService["vnfInstanceId"]}}</b> - <div *ngFor="let item of e2e_nsData"> + (nzOnOk)="scaleOk()" nzClassName="scaleModel"> + <h3><span style="color: red">* </span>Are you sure Scale this instance?</h3> + <div class="question"> + <h4>Instance ID:</h4> + <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] || thisService["nsInstanceId"] || + thisService["vnfInstanceId"]}}</div> + </div> + <div *ngFor="let item of e2e_nsData" style="margin-top: 20px"> <h3>{{ item.netWorkServiceName }}</h3> - <hr> - <span style="display:inline-block;width:50%;">Scale Type:</span> - <nz-select style="width: 165px;" [(ngModel)]="item.scaleType"> - <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option> - <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option> - </nz-select> - <span style="display:inline-block;width:50%;">AspectId:</span> - <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string"> - <span style="display:inline-block;width:50%;">Number Of Steps:</span> - <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100" - nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number> - <span style="display:inline-block;width:50%;">Scaling Direction:</span> - <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection"> - <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option> - <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option> - </nz-select> + <div class="e2eScaleContent"> + <span class="e2eScaleLable">Scale Type:</span> + <nz-select style="width: 165px;" [(ngModel)]="item.scaleType"> + <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option> + <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option> + </nz-select> + </div> + <div class="e2eScaleContent"> + <span class="e2eScaleLable">AspectId:</span> + <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string"> + </div> + <div class="e2eScaleContent"> + <span class="e2eScaleLable">Number Of Steps:</span> + <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100" + nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number> + </div> + <div class="e2eScaleContent"> + <span class="e2eScaleLable" >Scaling Direction:</span> + <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection"> + <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option> + <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option> + </nz-select> + </div> </div> </nz-modal> + <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()" - (nzOnOk)="deleteOk()"> - <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure delete this instance? - </h3> - Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] || - thisService["nsInstanceId"] }}</b> + (nzOnOk)="deleteOk()" nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"> + <h3><span style="color: red">* </span>Are you sure delete this instance?</h3> + <div class="question"> + <h4>Instance Name:</h4> + <div class="deleteModelContent">{{ thisService["service-instance-id"] || + thisService["nsInstanceId"] }}</div> + </div> + <div class="question"> + <h4>Instance ID:</h4> + <div class="deleteModelContent">{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }}</div> + </div> <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> - <span style="display:inline-block;width:50%;">terminationType:</span> - <nz-select style="width: 165px;" [(ngModel)]="terminationType"> - <nz-option nzValue="graceful" nzLabel="graceful"></nz-option> - <nz-option nzValue="forceful" nzLabel="forceful"></nz-option> - </nz-select> - <span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span> - <input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input - [(ngModel)]="gracefulTerminationTimeout"> + <div class="question"> + <h4>terminationType:</h4> + <nz-select style="width: 306px;" [(ngModel)]="terminationType"> + <nz-option nzValue="graceful" nzLabel="graceful"></nz-option> + <nz-option nzValue="forceful" nzLabel="forceful"></nz-option> + </nz-select> + </div> + <div class="question"> + <h4 *ngIf="terminationType=='graceful'">gracefulTerminationTimeout:</h4> + <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input + [(ngModel)]="gracefulTerminationTimeout"> + </div> </div> </nz-modal> + <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" - (nzOnOk)="healOk()"> - <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance? - </h3> - Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || - thisService["vnfInstanceId"]}}</b> + (nzOnOk)="healOk()" nzClassName="healModel"> + <h3><span style="color: red">* </span>Are you sure heal this instance?</h3> + <div class="heal-question"> + <p class="heal-label">Instance ID: </p> + <div class="healModelContent" title="{{ thisService['service-instance-id'] || thisService['nsInstanceId'] || + thisService['vnfInstanceId']}}"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || + thisService["vnfInstanceId"]}}</div> + </div> <!-- NS --> <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> - <span style="display:inline-block;width:50%;">degreeHealing:</span> - <nz-select style="width: 165px;" [(ngModel)]="nsParams.degreeHealing"> - <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option> - <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option> - <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option> - <nz-option nzValue="PARTIAL_HEALING" nzLabel="PARTIAL_HEALING"></nz-option> - </nz-select> + <div class="question"> + <p class="heal-label">degreeHealing:</p> + <nz-select style="width: 200px;height:42px;margin-left: 15px;border-radius: 6px" [(ngModel)]="nsParams.degreeHealing"> + <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option> + <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option> + <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option> + <nz-option nzValue="PARTIAL_HEALING" nzLabel="PARTIAL_HEALING"></nz-option> + </nz-select> + </div> <div> <span style="display:inline-block;">actionsHealing:</span> <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i @@ -302,15 +305,21 @@ </div> </div> <!-- vnf --> - <div *ngIf="thisService['serviceDomain'] == 'vnf'"> - <span style="display:inline-block;width:50%;">cause:</span> - <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.cause"> - <span style="display:inline-block;width:50%;">action:</span> - <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.additionalParams.action"> - <span style="display:inline-block;width:50%;">actionvminfo:</span> - <nz-select style="width: 165px;" [(ngModel)]="vmSelected"> - <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option> - </nz-select> + <div *ngIf="thisService['serviceDomain'] == 'vnf'" style="clear: both"> + <div class="heal-question"> + <p class="heal-label">cause:</p> + <input nz-input [(ngModel)]="vnfParams.cause" class="heal-input"> + </div> + <div class="heal-question"> + <p class="heal-label">action:</p> + <input nz-input [(ngModel)]="vnfParams.additionalParams.action" class="heal-input"> + </div> + <div class="heal-question"> + <p class="heal-label">actionvminfo:</p> + <nz-select style=" float: right;width: 200px;margin-left: 15px;border-radius: 6px;margin-right: 30px" [(ngModel)]="vmSelected"> + <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option> + </nz-select> + </div> </div> </nz-modal> </div> @@ -338,4 +347,4 @@ </app-e2e-creation> </div> <!--</div>--> -</nz-layout>
\ No newline at end of file +</nz-layout> diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less index 48d03b16..ca0ac419 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -27,6 +27,14 @@ hr { .ant-tabs-bar{ margin-bottom: 0!important; } +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 999; + background: rgba(0, 0, 0, 0.65); + top:0; +} .action { margin-bottom: 15px; padding: 28px; @@ -74,7 +82,7 @@ hr { width:116px; height:42px; background:#0DA9E2; - border-radius:2px; + border-radius:6px; margin-top: -15px; span { color: #fff; @@ -100,10 +108,10 @@ hr { } .top-list{ position: relative; - width:22%; - height:184px; - margin: 15px 1.5%; - float: left; + width:31%; + height:224px; + margin: 15px 1%; + float: left; background:url("../../../assets/images/servicelist-e2e.png") no-repeat; background-size: 100% 100%; //background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%); @@ -114,7 +122,8 @@ hr { background-size: 100% 100%; } .top-num .top-list:nth-child(3){ - background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat; + //background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat; + background:url("../../../assets/images/servicelist-sotn.png") no-repeat; background-size: 100% 100%; } .top-num .top-list:nth-child(4){ @@ -150,7 +159,7 @@ hr { display: inline-block; font-size: 22px; font-weight: 500; - margin-bottom: 10px; + margin-bottom: 20px; } } .list { @@ -301,7 +310,7 @@ hr { width: 320px; height: 32px; line-height: 32px; - margin: 25px auto; + margin: 35px auto; } .select-list>span{ text-align: right; diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts index 2ddf1cad..bf1d5d00 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts @@ -44,26 +44,28 @@ export class ServicesListComponent implements OnInit { serviceTypeList2 = []; serviceTypeSelected = {name:null}; serviceTypeSelected2 = {name: null}; + serviceTypeSelectedName = ""; + templateTypeSelected ="CCVPN"; orchestratorSelected = {name:null,id:null}; listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters')); language="en"; iconMore=false; + maskShow=false; serviceMunber = [ { "serviceDomain": "E2E", - "number": 10 + "number": 10, + "detailName":"End To End service" }, { "serviceDomain": "NS", - "number": 20 - }, - { - "serviceDomain": "SOTN", - "number": 30 + "number": 20, + "detailName":"Network Service" }, { "serviceDomain": "CCVPN", - "number": 40 + "number": 40, + "detailName":"Cross Domain and Cross Layer VPN" } ]; @@ -100,6 +102,8 @@ export class ServicesListComponent implements OnInit { this.customerSelected = this.customerList[0]; this.customerSelected2 = this.customerList2[0]; this.choseCustomer(this.customerSelected); + this.getServiceType(this.customerSelected2); + // console.log(this.customers) }) } @@ -121,19 +125,14 @@ export class ServicesListComponent implements OnInit { this.myhttp.getServiceTypes(this.customerSelected) .subscribe((data)=>{ this.serviceTypeList = data.map((item)=>{return {name:item["service-type"]}}); - this.serviceTypeList2 = data.map((item) => { - return {name: item["service-type"]} - }); + if(this.serviceTypeList.length==0){ console.log("serviceTypeList.length == 0",this.serviceTypeList); return false; } - if (this.serviceTypeList2.length == 0) { - console.log("serviceTypeList2.length == 0", this.serviceTypeList2); - return false; - } + this.serviceTypeSelected = this.serviceTypeList[0]; - this.serviceTypeSelected2 = this.serviceTypeList2[0]; + this.choseServiceType(this.serviceTypeSelected); // console.log(this.listServiceTypes); }) @@ -147,23 +146,44 @@ export class ServicesListComponent implements OnInit { // Create modal box 2 (dialog box) create ------------------------------- isVisible = false; + customerChange(): void { + console.log(this.customerSelected2) + this.getServiceType(this.customerSelected2); + } + getServiceType(customerSelected2) { + this.myhttp.getServiceTypes(customerSelected2) + .subscribe((data) => { + this.serviceTypeList2 = data.map((item) => { + return {name: item["service-type"]} + }); + if (this.serviceTypeList2.length == 0) { + console.log("serviceTypeList.length == 0", this.serviceTypeList2); + return false; + } + this.serviceTypeSelected2 = this.serviceTypeList2[0]; + this.serviceTypeSelectedName = this.serviceTypeSelected2.name; + console.log(this.serviceTypeList2); + this.getAlltemplates(); + }) + } createModal(): void { this.isVisible = true; this.getallOrchestrators(); - this.getAlltemplates(); + } // - templateTypeSelected = "SOTN"; + choseTemplateType(){ + this.templateTypeSelected = this.serviceTypeSelected2.name; this.getallOrchestrators(); this.getAlltemplates(); } // templates = []; - template1={name:null}; - template2={name:null}; - template3={name:null}; - template4={name:null}; + template1 = {name: null}; + // template2 = {name: null}; + // template3 = {name: null}; + // template4 = {name: null}; getAlltemplates(){ // this.myhttp.getAllServiceTemplates(this.templateTypeSelected) @@ -180,11 +200,8 @@ export class ServicesListComponent implements OnInit { } console.log(this.templates); this.template1 = this.templates[0]; - this.template2 = this.templates[1]; - this.template3 = this.templates[2]; - this.template4 = this.templates[0]; - - },(err)=>{ + + }, (err) => { }) } @@ -200,13 +217,11 @@ export class ServicesListComponent implements OnInit { this.isVisible = false; if(this.templateTypeSelected=="SOTN"||this.templateTypeSelected=="CCVPN"){ - let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}}; - let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}}; - this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2; + this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected2, templateType:this.templateTypeSelected},template:this.template1}; this.createshow = true; this.listDisplay = true; }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){ - this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:this.templateTypeSelected},template:this.template4, orchestrator:this.orchestratorSelected, isSol005Interface:this.isSol005Interface}; + this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected2, templateType:this.templateTypeSelected},template:this.template1, orchestrator:this.orchestratorSelected, isSol005Interface:this.isSol005Interface}; this.createshow2 = true; this.listDisplay = true; } @@ -253,7 +268,7 @@ export class ServicesListComponent implements OnInit { return child; } }) - + item["iconMore"]=this.iconMore; if(item["serviceDomain"]=="Network Service"){ if(item["vnfInfo"]){ item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{ @@ -439,6 +454,7 @@ export class ServicesListComponent implements OnInit { // console.log(service); this.thisService = service; this.healModelVisible = true; + this.maskShow = true; if(service.serviceDomain == "vnf"){ this.vnfParams.vnfInstanceId = service.vnfInstanceId; this.myhttp.getVnfInfo(service.vnfInstanceId) @@ -451,6 +467,7 @@ export class ServicesListComponent implements OnInit { } healOk(){ this.healModelVisible = false; + this.maskShow = false; // nsParams this.nsParams.actionsHealing = this.healActions.map((item)=>{return item.value}); let additional = {}; @@ -468,6 +485,7 @@ export class ServicesListComponent implements OnInit { } healCancel(){ this.healModelVisible = false; + this.maskShow = false; } // show detail @@ -493,7 +511,6 @@ export class ServicesListComponent implements OnInit { this.detailshow2 = true; } this.listDisplay = true; - this.detailshow = true; this.detailData = service; console.log(service); } @@ -505,9 +522,11 @@ export class ServicesListComponent implements OnInit { deleteModel(service){ this.thisService = service; this.deleteModelVisible = true; + this.maskShow = true; } deleteOk(){ this.deleteModelVisible = false; + this.maskShow = false; if(this.thisService["serviceDomain"] == "Network Service"){ this.deleteNsService(this.thisService); }else{ @@ -517,6 +536,7 @@ export class ServicesListComponent implements OnInit { deleteCancel(){ this.deleteModelVisible = false; + this.maskShow = false; } //ccvpn sotn createservice @@ -534,7 +554,7 @@ export class ServicesListComponent implements OnInit { let stageNum = 0; //Different stages of progress, used to add up subsequent service progress; let createParams = "?customerId="+this.customerSelected.id + - "&serviceType="+this.serviceTypeSelected.name + + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+this.templateTypeSelected + "&parentServiceInstanceId="; this.createService(obj.vpnbody,createParams).then((data)=>{ @@ -568,7 +588,7 @@ export class ServicesListComponent implements OnInit { let querypros = []; //All the query // Additional parameters let createParams = "?customerId="+this.customerSelected.id + - "&serviceType="+this.serviceTypeSelected.name + + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+"SDWAN" + "&parentServiceInstanceId="+this.parentServiceInstanceId; @@ -605,7 +625,7 @@ export class ServicesListComponent implements OnInit { let querypros = []; //All the query // Additional parameters let createParams = "?customerId="+this.customerSelected.id + - "&serviceType="+this.serviceTypeSelected.name + + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+"SITE" + "&parentServiceInstanceId="+this.parentServiceInstanceId; let createPros = obj.sitebody.map((group)=>{ @@ -657,7 +677,7 @@ export class ServicesListComponent implements OnInit { console.log(obj); let newData; // let createParams = "?customerId="+this.customerSelected.id + - "&serviceType="+this.serviceTypeSelected.name + + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+this.templateTypeSelected + "&parentServiceInstanceId="+ "&uuid="+obj.service.serviceUuid+ @@ -733,7 +753,7 @@ export class ServicesListComponent implements OnInit { } let createParams = "?ns_instance_id=" + data.nsInstanceId + "&customerId="+this.customerSelected.id + - "&serviceType="+this.serviceTypeSelected.name + + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+ this.templateTypeSelected + "&parentServiceInstanceId="; // step2 diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 7c17ab29..b12aa622 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -33,9 +33,11 @@ nz-table { .ant-select-selection--single { height: 40px; line-height: 40px !important; + border:none !important; .ant-select-selection-selected-value { height: 40px; line-height: 40px !important; + margin-left: 5px !important; } } } @@ -63,12 +65,15 @@ nz-table { color: #fff; } } + .ant-pagination-options-quick-jumper{ + display: none!important; + } } } } } -// Detail page mini table style +// ҳʽ .detailInformatioin { nz-table { .ant-table-small { @@ -119,9 +124,11 @@ nz-pagination { .ant-select-selection--single { height: 40px; line-height: 40px !important; + border:none !important; .ant-select-selection-selected-value { height: 40px; line-height: 40px !important; + margin-left: 5px !important; } } } @@ -149,6 +156,9 @@ nz-pagination { color: #fff; } } + .ant-pagination-options-quick-jumper{ + display: none!important; + } } } @@ -268,12 +278,10 @@ nz-range-picker { //2019.01.21 add services-list.component.html //creat -nz-modal { - .ant-modal { +nz-modal .serviceCreationModel.ant-modal,nz-modal .deleteModel.ant-modal, nz-modal .nsdeleteModel.ant-modal, nz-modal .healModel.ant-modal, nz-modal .scaleModel.ant-modal{ height: 628px; background: url("assets/images/create-box.png") no-repeat 100% 110%; overflow: auto; - } .ant-modal-content { height: 600px; background: transparent; @@ -585,4 +593,165 @@ nz-modal { } } } +} +//gong 2019.04.12 add +.healModel{ + .heal-question{ + nz-select{ + .ant-select-selection{ + height: 42px!important; + .ant-select-selection__rendered{ + line-height: 42px!important; + } + } + + } + } +} + +//gong 2019.04.15 services-list.component.html add +//deleteModel style +nz-modal .deleteModel.ant-modal, nz-modal .nsdeleteModel.ant-modal, nz-modal .healModel.ant-modal, nz-modal .scaleModel.ant-modal { + background: #ffffff; + height: 450px; + .ant-modal-content { + height: auto !important; + .ant-modal-header { + border-bottom: 2px solid #07A9E1; + } + .ant-modal-close { + background: #ffffff; + .ant-modal-close-x::before { + color: #B8C0C4; + border: 1px solid #B8C0C4; + } + } + .ant-modal-title { + color: #0DA9E2; + } + } + .ant-modal-body { + padding: 24px 35px; + h3 { + color: #3C4F8C; + margin-bottom: 10px; + } + .question, .heal-question { + margin-bottom: 15px; + h4 { + border-radius: 4px; + font-size: 16px; + color: rgba(60, 79, 140, 0.5); + } + .deleteModelContent, .healModelContent,.scaleModelContent{ + color: #0DA9E2; + width: 306px; + height: 40px; + line-height: 40px; + background: rgba(229, 238, 252, 0.8); + border-radius: 4px; + text-indent: 10px; + } + .heal-label { + float: left; + line-height: 42px; + margin-bottom: 0; + color: rgba(60, 79, 140, 0.5); + } + .heal-input { + width: 200px; + height: 40px; + border-radius: 6px; + float: right; + margin-right: 30px; + } + .healModelContent { + width: 200px; + height: 40px; + overflow: hidden; + float: right; + margin-right: 30px + } + } + .heal-question { + height: 40px; + } + .e2eScaleContent { + margin: 10px 0; + .e2eScaleLable { + height: 40px; + line-height: 40px; + display: inline-block; + width: 50%; + } + nz-select{ + .ant-select-selection--single { + height: 40px; + .ant-select-selection__rendered { + line-height: 40px; + } + } + } + input{ + height: 40px; + line-height: 40px; + } + nz-input-number { + height: 40px; + .ant-input-number-input-wrap { + height: 40px; + line-height: 40px; + .ant-input-number-input { + height: 38px; + line-height: 38px; + } + } + } + } + } + .ant-modal-footer { + padding: 0; + text-align: center; + button { + margin-top: 35px; + } + button:nth-child(2) { + margin-right: 0; + } + } +} + +nz-modal .nsdeleteModel.ant-modal { + height: 580px !important; + .ant-modal-footer { + padding: 0; + button { + margin-top: 15px; + } + } + .ant-modal-body { + .question { + nz-select { + .ant-select-selection--single { + height: 40px; + } + .ant-select-selection__rendered { + line-height: 40px; + } + } + input { + height: 40px; + line-height: 40px; + } + } + } +} + +nz-modal .healModel.ant-modal { + min-height: 470px !important; +} + +nz-modal .scaleModel.ant-modal { + height: 628px !important; + overflow: auto; }
\ No newline at end of file |