--- /dev/null
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ServiceListService } from '../../../../core/services/serviceList.service';
+
+@Component({
+ selector: 'app-create-model',
+ templateUrl: './create-model.component.html',
+ styleUrls: ['./create-model.component.less'],
+})
+export class CreateModelComponent implements OnInit {
+ @Input()isVisible: boolean;
+ @Input()customerList;
+ @Input()serviceTypeList;
+ @Input()customerSelected;
+ @Input()serviceTypeSelected;
+
+ @Output() cancel = new EventEmitter<boolean>();
+ @Output() createdModalShow = new EventEmitter<any>();
+
+ serviceTypes: any[];
+ currentCustomer: any;
+ currentServiceType: any;
+ templateTypeSelected:string = "CCVPN";
+ templates: any[] = [];
+ currentTemplate: object = { name: null };
+ orchestratorList: any[] = [];
+ orchestratorSelected: object = { name: null, id: null };
+ isSol005Interface: boolean = false;
+ temParametersTips: boolean = false;
+ createData: Object = {};
+ loadingAnimateShow: boolean = false;
+
+ constructor( private http: ServiceListService) {}
+
+ ngOnInit() {
+ this.serviceTypes = this.serviceTypeList;
+ this.currentCustomer = JSON.parse(JSON.stringify(this.customerSelected));
+ this.currentServiceType = JSON.parse(JSON.stringify(this.serviceTypeSelected));
+ this.getAlltemplates();
+ }
+
+ getServiceType(): void{
+ this.http.getServiceTypes(this.currentCustomer)
+ .subscribe((data) => {
+ this.serviceTypes = data.map((item) => {
+ return { name: item["service-type"] }
+ });
+ })
+ }
+
+ getAlltemplates() {
+ this.http.getAllServiceTemplates(this.templateTypeSelected)
+ .subscribe((data) => {
+ this.templates = data;
+ if (this.templateTypeSelected == "Network Service") {
+ this.templates = data.filter((d) => {
+ return typeof d.packageInfo.csarName == "string";
+ }).map((item) => {
+ let cName = item.packageInfo.csarName.split("/").reverse()[0];
+ return { name: cName, id: item.csarId, packageInfo: item.packageInfo }
+ });
+ }
+ this.currentTemplate = this.templates[0];
+ }, (err) => {
+ console.log(err);
+ })
+ }
+
+ getallOrchestrators() {
+ this.http.getAllOrchestrators()
+ .subscribe((data) => {
+ if(data.length > 0){
+ this.orchestratorList = data.map((item) => {
+ return { name: item["name"], id: item["name"] }
+ });
+ this.orchestratorSelected = this.orchestratorList[0];
+ }
+ })
+ }
+
+ handleCancel(): void {
+ this.isVisible = false;
+ this.cancel.emit(false);
+ this.loadingAnimateShow = false;
+ }
+
+ customerChange(): void {
+ this.getServiceType();
+ }
+
+ choseTemplateType() {
+ if(this.templateTypeSelected === 'E2E Service'){
+ this.getallOrchestrators();
+ }
+ this.getAlltemplates();
+ }
+
+ handleOk(): void {
+ if (this.templateTypeSelected === "SOTN" || this.templateTypeSelected === "CCVPN") {
+ this.createData = {
+ commonParams: {
+ customer: this.currentCustomer,
+ serviceType: this.currentServiceType,
+ templateType: this.templateTypeSelected
+ },
+ template: this.currentTemplate
+ };
+ } else if (this.templateTypeSelected === "E2E Service" || this.templateTypeSelected === "Network Service") {
+ this.createData = {
+ commonParams: {
+ customer: this.currentCustomer,
+ serviceType: this.currentServiceType,
+ templateType: this.templateTypeSelected
+ },
+ template: this.currentTemplate,
+ orchestrator: this.orchestratorSelected,
+ isSol005Interface: this.isSol005Interface
+ };
+ }
+ this.getTemParameters();
+ }
+
+ getTemParameters() {
+ let chosedtemplates = this.createData["template"];
+ let types = this.createData["commonParams"].templateType;
+ if (types == "E2E Service") {
+ types = "e2e";
+ } else if (types == "Network Service") {
+ types = "ns";
+ }
+ this.loadingAnimateShow = true;
+ this.http.getTemplateParameters(types, chosedtemplates)
+ .subscribe((data) => {
+ this.loadingAnimateShow = false;
+ if (data.status == "FAILED") {
+ this.temParametersTips = true;
+ this.isVisible = true;
+ } else {
+ this.cancel.emit(false);
+ this.temParametersTips = false;
+ this.createdModalShow.emit({templateType: this.templateTypeSelected, data, createData: this.createData})
+ }
+ })
+ }
+}
\ No newline at end of file
limitations under the License.
-->
<div class="action ant-tabs-bar">
-
<span>
<i class="icon">
<img src="assets/images/customer.png" alt="">
<i *ngIf="width>1200" class="anticon anticon-plus"></i>
<span> {{"i18nTextDefine_Create" | translate}} </span>
</button>
- <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} "
- (nzOnCancel)="handleCancel()"
- (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"
- nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
- nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
- <div class="select-list">
- <span style="display:inline-block;"> {{"i18nTextDefine_Customer" | translate}} : </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;"> {{"i18nTextDefine_ServiceType" | translate}} : </span>
- <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear
- (ngModelChange)="serviceTypeChange()">
- <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;"> {{"i18nTextDefine_UseCase" | translate}} : </span>
- <nz-select style="width: 176px;float: right;" [(ngModel)]="templateTypeSelected" nzAllowClear
- (ngModelChange)="choseTemplateType()">
- <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option>
- <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option>
- <nz-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option>
- <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option>
- </nz-select>
- </div>
-
- <div class="select-list">
- <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Template" | translate}} : </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;"> {{"i18nTextDefine_Orchestrator" | translate}} : </span>
- <nz-select style="width: 176px;float: right;" [(ngModel)]="orchestratorSelected" nzAllowClear>
- <nz-option *ngFor="let item of orchestratorList" [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,0.5)">Sol005</label>
- </div>
- </div>
- <div class="select-list" style="color: red;margin-left: 66px;" *ngIf="temParametersTips">
- {{"i18nTextDefine_Templateparsingfailed" | translate}}
- </div>
- </nz-modal>
+ <app-create-model *ngIf="isVisible" [isVisible]="isVisible" (cancel)="isVisible=$event" (createdModalShow)="createdModalShow($event)"
+ [customerList]="customerList" [serviceTypeList]="serviceTypeList" [customerSelected]="customerSelected" [serviceTypeSelected]="serviceTypeSelected">
+ </app-create-model>
+
</div>
<nz-layout style=" padding: 20px 32px; ">
<div class="top-num">
<app-top-card
- *ngFor="let item of serviceMunber"
+ *ngFor="let item of serviceNunber"
[serviceDomain]="item.serviceDomain"
[successNum]="item.Success"
[failedNum]="item.failed"
</div>
<!--</div>-->
</nz-layout>
-<div class="loading" *ngIf="loadingAnimateShow">
+<!-- <div class="loading" *ngIf="loadingAnimateShow">
<img src="assets/images/loading-animate2.gif" alt="loading">
<p>Please wating……</p>
-</div>
\ No newline at end of file
+</div> -->
\ No newline at end of file
language = sessionStorage.getItem("DefaultLang");
iconMore = false;
loadingAnimateShow = false;
- serviceMunber = [ // top: E2E/NS/CCVPN data
+ serviceNunber = [ // top: E2E/NS/CCVPN data
{
"serviceDomain": "E2E",
"Success": 0,
console.log(this.language, "this.language");
this.myhttp.getAllCustomers()
.subscribe((data) => {
- this.customerList = data.map((item) => {
- return { name: item["subscriber-name"], id: item["global-customer-id"] }
- });
- if (this.customerList.length == 0) {
- console.log("customerList.length == 0", this.customerList);
- return false;
- }
- this.customerList2 = data.map((item) => {
- return { name: item["subscriber-name"], id: item["global-customer-id"] }
- });
- if (this.customerList2.length == 0) {
- return false;
+ this.customerList = data.map(item => ({ name: item["subscriber-name"], id: item["global-customer-id"] }) );
+ if(data.length !== 0){
+ // this.customerList2 = data.map(item => ({ name: item["subscriber-name"], id: item["global-customer-id"] }) );
+ this.customerSelected = this.customerList[0];
+ this.choseCustomer();
}
- this.customerSelected = this.customerList[0];
- this.choseCustomer(this.customerSelected);
})
}
getallOrchestrators() {
this.myhttp.getAllOrchestrators()
.subscribe((data) => {
- this.orchestratorList = data.map((item) => {
- return { name: item["name"], id: item["name"] }
- });
- if (this.orchestratorList.length == 0) {
- console.log("orchestratorList.length == 0", this.orchestratorList);
- return false;
+ if(data.length > 0){
+ this.orchestratorList = data.map((item) => {
+ return { name: item["name"], id: item["name"] }
+ });
+ this.orchestratorSelected = this.orchestratorList[0];
}
- this.orchestratorSelected = this.orchestratorList[0];
})
}
- choseCustomer(item) {
- this.customerSelected = item;
+ choseCustomer(item = this.customerSelected) {
+ if(this.customerSelected !== item) this.customerSelected = item;
this.myhttp.getServiceTypes(this.customerSelected)
.subscribe((data) => {
- this.serviceTypeList = data.map((item) => {
- return { name: item["service-type"] }
- });
-
- if (this.serviceTypeList.length == 0) {
- console.log("serviceTypeList.length == 0", this.serviceTypeList);
- return false;
+ this.serviceTypeList = data.map( item => ({ name: item["service-type"] }));
+ if(data.length !== 0){
+ this.serviceTypeSelected = this.serviceTypeList[0];
+ this.choseServiceType();
}
-
- this.serviceTypeSelected = this.serviceTypeList[0];
-
- this.choseServiceType(this.serviceTypeSelected);
})
}
- choseServiceType(item) {
- this.serviceTypeSelected = item;
+ choseServiceType(item = this.serviceTypeSelected) {
+ if(this.serviceTypeSelected !== item) this.serviceTypeSelected = item;
this.getTableData();
}
// Create modal box 2 (dialog box) create -------------------------------
isVisible = false;
- customerChange(): void {
- 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.getAlltemplates();
- })
- }
- serviceTypeChange(): void {
- this.serviceTypeSelected2.name = this.serviceTypeSelectedName
- }
createModal(): void {
this.isVisible = true;
- this.getallOrchestrators();
- this.customerSelected2 = this.customerSelected;
- this.serviceTypeSelectedName = this.serviceTypeSelected.name;
- this.serviceTypeSelected2 = Object.assign({}, this.serviceTypeSelected);
- this.getServiceType(this.customerSelected2);
}
- choseTemplateType() {
- this.getallOrchestrators();
- this.getAlltemplates();
- }
-
- templates = [];
- template1 = { name: null };
-
- getAlltemplates() {
- this.myhttp.getAllServiceTemplates(this.templateTypeSelected)
- .subscribe((data) => {
- this.templates = data;
- if (this.templateTypeSelected == "Network Service") {
- this.templates = data.filter((d) => {
- return typeof d.packageInfo.csarName == "string";
- }).map((item) => {
- let cName = item.packageInfo.csarName.split("/").reverse()[0];
- return { name: cName, id: item.csarId, packageInfo: item.packageInfo }
- });
- }
- this.template1 = this.templates[0];
- }, (err) => {
- console.log(err);
- })
- }
-
- createshow = false;
- createshow2 = false;
- listDisplay = false;
+ createshow: boolean = false;
+ createshow2: boolean = false;
+ listDisplay: boolean = false;
createData: Object = {};
-
- handleOk(): void {
- if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") {
- this.createData = {
- commonParams: {
- customer: this.customerSelected,
- serviceType: this.serviceTypeSelected2,
- templateType: this.templateTypeSelected
- }, template: this.template1
- };
- } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") {
- this.createData = {
- commonParams: {
- customer: this.customerSelected,
- serviceType: this.serviceTypeSelected2,
- templateType: this.templateTypeSelected
- },
- template: this.template1,
- orchestrator: this.orchestratorSelected,
- isSol005Interface: this.isSol005Interface
- };
- }
- this.getTemParameters();
- }
-
- handleCancel(): void {
- this.isVisible = false;
- this.loadingAnimateShow = false;
- }
-
- temParametersTips = false;
ccvpn_temParametersContent: any;
e2e_ns_temParametersContent: any;
- getTemParameters() {
- let chosedtemplates = this.createData["template"];
- let types = this.createData["commonParams"].templateType;
- if (types == "E2E Service") {
- types = "e2e";
- } else if (types == "Network Service") {
- types = "ns";
+ createdModalShow(obj: any): void{
+ this.createData = obj.createData;
+ console.log(obj.createData)
+ if (obj.templateType === "SOTN" || obj.templateType === "CCVPN") {
+ this.ccvpn_temParametersContent = obj.data;
+ this.createshow = true;
+ } else if (obj.templateType === "E2E Service" || obj.templateType === "Network Service") {
+ this.e2e_ns_temParametersContent = obj.data;
+ this.createshow2 = true;
}
- this.loadingAnimateShow = true;
- this.myhttp.getTemplateParameters(types, chosedtemplates)
- .subscribe((data) => {
- this.loadingAnimateShow = false;
- if (data.status == "FAILED") {
- this.temParametersTips = true;
- this.isVisible = true;
- console.log("Template parsing Failed");
- } else {
- this.isVisible = false;
- this.temParametersTips = false;
- if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") {
- this.ccvpn_temParametersContent = data;
- this.createshow = true;
- this.listDisplay = true;
- } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") {
- this.e2e_ns_temParametersContent = data;
- this.createshow2 = true;
- this.listDisplay = true;
- }
- }
- })
+ this.listDisplay = true;
}
//tableData
}
item["iconMore"] = this.iconMore;
- if (item["serviceDomain"] == "Network Service") {
+ if (item["serviceDomain"] === "Network Service") {
if (item["vnfInfo"]) {
item["childServiceInstances"] = item["vnfInfo"].map((vnf) => {
vnf["serviceDomain"] = "vnf";
};
vnfInfo.vnfNsInstanceId = item["nsInstanceId"] || item["service-instance-id"];
vnfInfo.vnfInstanceId = vnf["relationship-data"].find((vnfid) => {
- return vnfid["relationship-key"] == "generic-vnf.vnf-id"
+ return vnfid["relationship-key"] === "generic-vnf.vnf-id"
})["relationship-value"];
vnfInfo.vnfInstanceName = vnf["related-to-property"].find((vnfname) => {
- return vnfname["property-key"] == "generic-vnf.vnf-name"
+ return vnfname["property-key"] === "generic-vnf.vnf-name"
})["property-value"];
return vnfInfo;
})
}
//
- if (item["operationResult"] == "2001") { //operationResult==2001
+ if (item["operationResult"] === "2001") {
item["status"] = "Available";
item["tips"] = "Available";
item["statusClass"] = item["operationResult"];
}
// 2018.12.13
- else if (item["operationResult"] == "2002") { //operationResult==2002
- if (item["operationType"] == "1001" || item["operationType"] == "1002") {
+ else if (item["operationResult"] === "2002") {
+ if (item["operationType"] === "1001" || item["operationType"] === "1002") {
// item["status"] = this.accordingState["operationResult"][item["operationResult"]];
item["status"] = this.listSortMasters["operationResults"].find((its) => {
- return its["sortCode"] == item["operationResult"] && its["language"] == this.language
+ return its["sortCode"] === item["operationResult"] && its["language"] === this.language
})["sortValue"];
item["tips"] = "Unavailable";
item["statusClass"] = item["operationType"];
- } else if (item["operationType"] != "1001" && item["operationType"] != "1002") {
- // item["status"] = this.accordingState["operationResult"][item["operationResult"]];
+ } else {
item["status"] = this.listSortMasters["operationResults"].find((its) => {
- return its["sortCode"] == item["operationResult"] && its["language"] == this.language
+ return its["sortCode"] === item["operationResult"] && its["language"] === this.language
})["sortValue"];
item["tips"] = "Available";
item["statusClass"] = item["operationType"];
}
}
- else if (item["operationResult"] == "2003") { //operationResult==2003
- // item["status"] = this.accordingState["operationResult"][item["operationResult"]];
+ else if (item["operationResult"] === "2003") {
item["status"] = this.listSortMasters["operationResults"].find((its) => {
return its["sortCode"] == item["operationResult"] && its["language"] == this.language
})["sortValue"];
})
} else {
let updata = (prodata) => {
- item["rate"] = prodata.progress || item["rate"];
+ item["rate"] = prodata.progress || 0;
+ if(item["rate"] > 100) item["status"] = prodata.status;
item["tips"] = this.listSortMasters["operationTypes"].find((its) => {
- return its["sortCode"] == item["operationType"] && its["language"] == this.language
- })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%";
- if (item["rate"] > 100) {
- item["status"] = prodata.status;
- item["tips"] = this.listSortMasters["operationTypes"].find((its) => {
- return its["sortCode"] == item["operationType"] && its["language"] == this.language
- })["sortValue"] + '\xa0\xa0\xa0' + item["status"];
- }
+ return its["sortCode"] === item["operationType"] && its["language"] === this.language
+ })["sortValue"] + '\xa0\xa0\xa0' + (item["rate"] > 100? item["status"] : prodata.progress + '%');
}
let obj = {
serviceId: item["service-instance-id"],
}
return item;
})
- this.tableData.map((item, index) => {
- if (item.serviceDomain == 'E2E Service') {
- if (item.operationResult == 2001) {
- this.serviceMunber[0]["Success"] += 1;
- } else if (item.operationResult == 2002) {
- this.serviceMunber[0]["failed"] += 1;
- } else if (item.operationResult == 2003) {
- this.serviceMunber[0]["InProgress"] += 1;
+ this.tableData.forEach( item => {
+ if (item.serviceDomain === 'E2E Service') {
+ if (item.operationResult === 2001) {
+ this.serviceNunber[0]["Success"] += 1;
+ } else if (item.operationResult === 2002) {
+ this.serviceNunber[0]["failed"] += 1;
+ } else if (item.operationResult === 2003) {
+ this.serviceNunber[0]["InProgress"] += 1;
}
}
- else if (item.serviceDomain == 'Network Service') {
- if (item.operationResult == 2001) {
- this.serviceMunber[1]["Success"] += 1;
- } else if (item.operationResult == 2002) {
- this.serviceMunber[1]["failed"] += 1;
- } else if (item.operationResult == 2003) {
- this.serviceMunber[1]["InProgress"] += 1;
+ else if (item.serviceDomain === 'Network Service') {
+ if (item.operationResult === 2001) {
+ this.serviceNunber[1]["Success"] += 1;
+ } else if (item.operationResult === 2002) {
+ this.serviceNunber[1]["failed"] += 1;
+ } else if (item.operationResult === 2003) {
+ this.serviceNunber[1]["InProgress"] += 1;
}
}
- else if (item.serviceDomain == 'CCVPN') {
- if (item.operationResult == 2001) {
- this.serviceMunber[2]["Success"] += 1;
- } else if (item.operationResult == 2002) {
- this.serviceMunber[2]["failed"] += 1;
- } else if (item.operationResult == 2003) {
- this.serviceMunber[2]["InProgress"] += 1;
+ else if (item.serviceDomain === 'CCVPN') {
+ if (item.operationResult === 2001) {
+ this.serviceNunber[2]["Success"] += 1;
+ } else if (item.operationResult === 2002) {
+ this.serviceNunber[2]["failed"] += 1;
+ } else if (item.operationResult === 2003) {
+ this.serviceNunber[2]["InProgress"] += 1;
}
}
})
}
queryProgress(obj, callback) {
- let mypromise = new Promise((res, rej) => {
+ return new Promise( res => {
let operationTypeObj = {operationType:obj.operationType};
let errorNums = 180;
let requeryCcvpn = () => {
this.myhttp.getProgress(obj,operationTypeObj)
.subscribe((data) => {
- if (data.status == "FAILED") {
+ if (data.status === "FAILED") {
callback({ progress: 255, status: "Failed" });
- return false;
- }
- if (data.operationStatus == null || data.operationStatus.progress == undefined) {
+ }else if (data.operationStatus === null || data.operationStatus.progress === undefined) {
errorNums--;
- if (errorNums == 0) {
+ if (errorNums === 0) {
callback({ progress: 255, status: "time over" });
return false;
}
this.progressCcvpnOutTimer = setTimeout(()=>{
requeryCcvpn();
},10000);
- return false;
- }
- if (data.operationStatus.progress > 100) {
+ }else if (data.operationStatus.progress > 100) {
callback({ progress: 255, status: "time over" });
- return false;
- }
- if (data.operationStatus.progress < 100) {
+ }else if (data.operationStatus.progress < 100) {
callback(data.operationStatus);
this.progressingCcvpnTimer = setTimeout(()=>{
requeryCcvpn();
}
requeryCcvpn();
})
- return mypromise;
}
queryNsProgress(jobid, id, callback, operationType) {
Code Review / usecase-ui.git / commitdiff