import { DetailsComponent } from './components/details/details.component';
import { GraphiclistComponent } from './components/graphiclist/graphiclist.component';
+import { E2eCreationComponent } from './components/e2e-creation/e2e-creation.component';
import { BarComponent } from './components/charts/bar/bar.component';
import { LineComponent } from './components/charts/line/line.component';
LineComponent,
BarComponent,
GraphiclistComponent,
+ E2eCreationComponent,
CcvpnNetworkComponent,
CcvpnDetailComponent,
--- /dev/null
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file 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.
+*/
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 10px;
+}
+.model {
+ background-color: #fff;
+ height: 90%;
+ overflow-y: auto;
+}
+.model .back {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+.model .creation {
+ position: relative;
+ width: 60%;
+ height: 100%;
+ overflow-y: auto;
+ border-radius: 5px;
+ padding: 20px;
+}
+.model .creation .baseparms h3 {
+ color: #3fa8eb;
+ font: 700 16px "Arial";
+}
+.model .creation .baseparms h4 {
+ font: 700 16px "Arial";
+}
+.model .creation .baseparms ul li {
+ margin: 3px 0;
+}
+.model .creation .baseparms ul li span {
+ display: inline-block;
+ width: 40%;
+ font: 700 14px "Arial";
+ vertical-align: middle;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: right;
+}
+.model .creation .baseparms ul li input {
+ width: 165px;
+}
+.model .creation .submit {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+.model .chart {
+ width: 40%;
+ padding: 10px;
+ height: 100%;
+ border-left: 10px solid #f3f3f3;
+}
--- /dev/null
+<!--
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file 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.
+-->
+<h3 class="title"> Services List </h3>
+<hr>
+<div class="model">
+ <!-- 创建数据 -->
+ <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button>
+ <div class="creation fl">
+ <div *ngIf="createParams.commonParams.templateType=='E2E Service'" class="baseparms clearfix">
+ <h3>Base</h3>
+ <ul>
+ <li><span>Name*</span> <input nz-input [(ngModel)]="service.name"></li>
+ <li><span>Description*</span> <input nz-input [(ngModel)]="service.description"></li>
+ </ul>
+ <br>
+ <h3>Template Parameters</h3>
+ <h4>template Inputs</h4>
+ <ul>
+ <li *ngFor="let parameter of templateParameters.inputs; let i = index;">
+ <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span>
+ <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value">
+
+ <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}</h5>
+ <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span>
+ <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+ <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+ </nz-select>
+ <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+ <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option>
+ </nz-select> -->
+ </li>
+ </ul>
+ <h4>nestedTemplate Inputs</h4>
+ <div *ngFor="let template of templateParameters.nestedTemplates;">
+ <h4 style="font:400 14px 'Arial';color:#aaa;">templateName: {{template.name}}</h4>
+ <ul>
+ <li *ngFor="let input of template.inputs; let i = index;">
+ <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" > {{input.name}}: </span>
+ <input *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" nz-input [(ngModel)]="input.value">
+
+ <h5 *ngIf="input.type === 'vf_location'" style="padding-left:10px;">id: {{input.name}}</h5>
+ <span *ngIf="input.type === 'vf_location'"> vf_location: </span>
+ <nz-select *ngIf="input.type === 'vf_location'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear >
+ <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+ </nz-select>
+ <!-- <nz-select *ngIf="input.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear >
+ <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option>
+ </nz-select> -->
+ </li>
+ </ul>
+ </div>
+
+ </div>
+
+ <div *ngIf="createParams.commonParams.templateType=='Network Service'" class="baseparms clearfix">
+ <h3>Base</h3>
+ <ul>
+ <li><span>Name*</span> <input nz-input [(ngModel)]="ns_service.nsName"></li>
+ <li><span>Description*</span> <input nz-input [(ngModel)]="ns_service.description"></li>
+ </ul>
+ <h3>Template Parameters</h3>
+ <h4>template Inputs</h4>
+ <ul>
+ <li *ngFor="let parameter of nsTemplateParameters.inputs2; let i = index;">
+ <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span>
+ <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value">
+
+ <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}</h5>
+ <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span>
+ <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+ <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+ </nz-select>
+ <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+ <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option>
+ </nz-select> -->
+ </li>
+ </ul>
+
+ <h4>vnfs Inputs</h4>
+
+ <ul>
+ <li *ngFor="let vnf of nsTemplateParameters.vnfs;">
+ <h5 style="padding-left:10px;">id: {{vnf.vnf_id}}</h5>
+ <span> vf_location: </span>
+ <nz-select style="width: 165px;" [(ngModel)]="vnf.value" nzAllowClear >
+ <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+ </nz-select>
+ </li>
+ </ul>
+
+ </div>
+ <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><span>Create</span></button>
+ </div>
+
+ <!-- 图 -->
+ <div class="chart fr">
+ Create Service
+ <div id="createChart">
+ <svg width="100%" height="100%">
+
+ <image xlink:href="./assets/images/cloud-site.png"
+ x="25%" y="30%" width="50%"/>
+
+ </svg>
+
+ </div>
+ </div>
+
+</div>
+
--- /dev/null
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file 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.
+*/
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 10px;
+}
+.model {
+ background-color: #fff;
+ height: 90%;
+ overflow-y: auto;
+ .back {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ }
+ .creation{
+ position: relative;
+ width: 60%;
+ height: 100%;
+ overflow-y: auto;
+ border-radius: 5px;
+ padding: 20px;
+ .baseparms {
+ h3 {
+ color: #3fa8eb;
+ font: 700 16px "Arial";
+ }
+ h4 {
+ font: 700 16px "Arial";
+ }
+ ul li {
+ // display: inline-block;
+ margin: 3px 0;
+ span {
+ display: inline-block;
+ width: 40%;
+ font: 700 14px "Arial";
+ vertical-align: middle;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: right;
+ }
+ input {
+ width: 165px;
+ }
+ }
+ }
+ .submit {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ }
+ }
+ .chart {
+ width: 40%;
+ padding: 10px;
+ height: 100%;
+ border-left: 10px solid #f3f3f3;
+ }
+}
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { E2eCreationComponent } from './e2e-creation.component';
+
+describe('E2eCreationComponent', () => {
+ let component: E2eCreationComponent;
+ let fixture: ComponentFixture<E2eCreationComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ E2eCreationComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(E2eCreationComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file 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.
+*/
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MyhttpService } from '../../myhttp.service';
+
+@Component({
+ selector: 'app-e2e-creation',
+ templateUrl: './e2e-creation.component.html',
+ styleUrls: ['./e2e-creation.component.less']
+})
+export class E2eCreationComponent implements OnInit {
+
+ constructor( private myhttp:MyhttpService ) { }
+
+ ngOnInit() {
+ this.getTemParameters();
+ this.getVimInfo();
+ this.getSdnControllers();
+ console.log(this.createParams);
+ }
+
+ @Output() e2eCloseCreate = new EventEmitter();
+ @Output() nsCloseCreate = new EventEmitter();
+ @Input() createParams;
+
+
+ // e2e serviceTemplateParameters
+ templateParameters = {
+ invariantUUID: "",
+ uuid: "",
+ name: "",
+ type: "",
+ version: "",
+ description: "",
+ category: "",
+ subcategory: "",
+ customizationUuid: "",
+ inputs:[],
+ nestedTemplates:[]
+ };
+ // ns serviceTemplateParameters
+ nsTemplateParameters = {
+ inputs:{},
+ inputs2:[],
+ vnfs:[]
+ }
+ getTemParameters(){ //获取模板参数
+ let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
+ this.myhttp.getTemplateParameters(type,this.createParams.template)
+ .subscribe((data)=>{
+ console.log(this.createParams);
+ console.log(data);
+ if(type == "e2e"){
+ this.templateParameters = data;
+ this.templateParameters.nestedTemplates.forEach((item)=>{
+ item.inputs = item.inputs.filter((input)=>{return input.type !== "sdn_controller"});
+ })
+ }else if(type == "ns"){
+ this.nsTemplateParameters = data;
+ this.nsTemplateParameters["inputs2"] = [];
+ let inputs = this.nsTemplateParameters.inputs;
+ for(let key in inputs){
+ this.nsTemplateParameters["inputs2"].push({name:key,type:inputs[key].type,value:inputs[key].value})
+ }
+ console.log(this.nsTemplateParameters);
+ }
+
+
+ })
+ }
+ vimInfos=[];
+ getVimInfo() {
+ this.myhttp.getVimInfo()
+ .subscribe((data)=>{
+ this.vimInfos = data.map((item)=>{return {name:item['cloud-owner'],id:item['cloud-region-id']}});
+ })
+ };
+ sdnControllers=[];
+ getSdnControllers(){
+ this.myhttp.getSdnControllers()
+ .subscribe((data)=>{
+ this.sdnControllers = data.map((item)=>{return {name:item['thirdparty-sdnc-id'],id:item['thirdparty-sdnc-id']}});
+ })
+ }
+
+ // e2e requstbody
+ service = {
+ name: "",
+ description: "",
+ serviceInvariantUuid: "",
+ serviceUuid: "", // uuid ??
+ globalSubscriberId: "", // "customer.id",
+ serviceType: "", // "serviceType.value",
+ parameters: {
+ locationConstraints:[
+
+ ],
+ resources: [],
+ requestInputs: {},
+ }
+
+ }
+
+ // ns requstbody
+ ns_service = {
+ csarId: "",
+ nsName: "",
+ description: "",
+ context: {
+ globalCustomerId: "",
+ serviceType: ""
+ }
+ }
+ ns_service2 = {
+ locationConstraints: [
+
+ ],
+ additionalParamForNs: {
+ }
+ }
+ submit(){
+ let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
+ if(type == "e2e"){
+ this.service.serviceInvariantUuid = this.templateParameters.invariantUUID;
+ this.service.serviceUuid = this.templateParameters.uuid;
+ this.service.globalSubscriberId = this.createParams.commonParams.customer.id;
+ this.service.serviceType = this.createParams.commonParams.serviceType.name;
+
+ this.templateParameters.inputs.forEach((item)=>{
+ this.service.parameters.requestInputs[item.name] = item.value == undefined ? item.defaultValue : item.value;
+ })
+
+ this.templateParameters.nestedTemplates.forEach((item)=>{
+ let nsService = {
+ resourceName: item.name,
+ resourceInvariantUuid: item.invariantUUID,
+ resourceUuid: item.uuid,
+ resourceCustomizationUuid: item.customizationUuid,
+ parameters: {
+ locationConstraints:[],
+ resources:[],
+ requestInputs:{}
+ }
+ }
+ item.inputs.forEach((input)=>{
+ if(input.type == "vf_location"){
+ let location = {
+ vnfProfileId: input.name,
+ locationConstraints:{
+ vimId:input.value.id
+ }
+ }
+ nsService.parameters.locationConstraints.push(location);
+ }
+ })
+ this.service.parameters.resources.push(nsService);
+ })
+
+ this.e2eCloseCreate.emit(this.service);
+
+ }else if(type == "ns"){
+ //create ns instance
+ this.ns_service.csarId = this.createParams.template.id;
+ this.ns_service.context.globalCustomerId = this.createParams.commonParams.customer.id;
+ this.ns_service.context.serviceType = this.createParams.commonParams.serviceType.name;
+
+ this.nsTemplateParameters.inputs2.forEach((input)=>{
+ this.ns_service2.additionalParamForNs[input.name] = input.value == undefined ? input.defaultValue : input.value;
+ })
+ this.nsTemplateParameters.vnfs.forEach((vnf)=>{
+ let vnfparams = {
+ vnfProfileId: vnf.vnf_id,
+ locationConstraints: {
+ vimid: vnf.value.id,
+ accessinfo: {
+ tenant: ""
+ },
+ accessInfo: {
+ tenant: ""
+ }
+ }
+ }
+ this.ns_service2.locationConstraints.push(vnfparams);
+ })
+ console.log(this.ns_service2);
+
+ let requstbody = {
+ step1:this.ns_service,
+ step2:this.ns_service2
+ }
+ this.nsCloseCreate.emit(requstbody);
+ }
+
+ }
+ goback(){
+ this.e2eCloseCreate.emit();
+ }
+
+}
// customers:this.baseUrl + "/customers.json?",
// serviceType:this.baseUrl + "/serviceTypes.json?*_*",
// servicesCategory:this.baseUrl + "/configuration_files/servicesCategory.json?",
- // serviceInstanceList:this.baseUrl + "/instanceTableData4.json?",
+ // serviceInstanceList:this.baseUrl + "/instanceTableData.json?",
// serviceTemplates:this.baseUrl + "/serviceTemplates2.json?",
- // templateCategory:this.baseUrl + "/configuration_files/templateCategory.json?",
// templateParameters:this.baseUrl + "/*_*" + "ServiceTemplateParameters.json?",
+ // vimInfo:this.baseUrl + "/vimInfo.json?",
+ // sdnControllers:this.baseUrl + "/sdnControllers.json?",
// addressData: this.baseUrl + "/siteAddressData.json?",
- // createService:this.baseUrl + "/createService.json?",
+ // createService:this.baseUrl + "/createService.json",
+ // ns_createService: this.baseUrl + "/createNsService.json?",
+ // ns_createService2: this.baseUrl + "/createNsService2.json",
// inputNamesTransform: this.baseUrl + "/configuration_files/inputNamesTranslate.json?",
// deleteService: this.baseUrl + "/deleteService.json?",
// progress:this.baseUrl + "/progress.json?",
+ // nsProgress:this.baseUrl + "nsProgress.json?",
// allottedResource:this.baseUrl + "/allotted-resources2.json?",
// pnfDetail:this.baseUrl + "/pnfdetail-domain.json?",
servicesCategory: "./assets/json/configuration_files/servicesCategory.json",
serviceInstanceList:this.baseUrl + '/uui-sotn/getServiceInstanceList',
serviceTemplates:this.baseUrl + "/uui-lcm/service-templates",
- templateCategory: "./assets/json/configuration_files/templateCategory.json",
templateParameters:this.baseUrl + "/uui-lcm/service-templates/" + "*_*" +"?toscaModelPath=",
+ nstemplateParameters:this.baseUrl + "/uui-lcm/fetchNsTemplateData",
+ vimInfo:this.baseUrl + "/uui-lcm/locations/",
+ sdnControllers:this.baseUrl + "/uui-lcm/sdnc-controllers/",
addressData: this.baseUrl + "/uui-sotn/getOssInvenory",
createService:this.baseUrl + "/uui-lcm/services",
+ ns_createService: this.baseUrl + "/uui-lcm/createNetworkServiceInstance",
+ ns_createService2: this.baseUrl + "/uui-lcm/instantiateNetworkServiceInstance",
inputNamesTransform: "./assets/json/configuration_files/inputNamesTranslate.json?",
deleteService: this.baseUrl + "/uui-lcm/services/",
progress:this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/",
+ nsProgress:this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/"+ "*_*" + "?responseId=",
allottedResource:this.baseUrl + "/uui-sotn/getAllottedResources",
pnfDetail:this.baseUrl + "/uui-sotn/getPnfInfo/",
-
-
- testObservable(){
- let myObservable = new Observable((observer)=>{
- observer.next(1);
- observer.next((n)=>{
- console.log(3+n);
- })
- setTimeout(()=>{
- observer.next(66666)
- },100)
- observer.next(()=>{
- setTimeout((n)=>{
- console.log("9999---" + n);
- },10)
- })
- // observer.error(2);
- // observer.complete();
- });
-
- myObservable.subscribe((e)=>{
- if(typeof e == "function"){
- e(5)
- }
- console.log(e);
- },(err)=>{
- console.log(err);
- },()=>{
- console.log(555);
- })
- }
-
//---------------------------------------------------------------------------------
// Get all customers
getAllCustomers(){
return this.http.get<any>(this.url.customers);
- // return this.http.jsonp<Object[]>('http://127.0.0.1:5500/customers.json',"callback");//
}
// Get relevant serviceType
return this.http.get<any>(url);
}
// Get service classification information, local configuration file
- getServicesCategory(){
- return this.http.get<any>(this.url.servicesCategory);
- }
+ // getServicesCategory(){
+
// return this.http.get<any>(this.url.servicesCategory);
+ // }
// list Tabular data
getInstanceTableData(paramsObj){
let params = new HttpParams({fromObject:paramsObj});
// }
// Get all template types
- getAllServiceTemplates(){
+ getAllServiceTemplates(type){
+ if(type=="Network Service"){
+ let nsUrl = this.url.serviceTemplates.replace("service-templates","listNsTemplates").replace("serviceTemplates2","serviceTemplates-ns");
+ console.log(nsUrl);
+ return this.http.get<any>(nsUrl);
+ }
return this.http.get<any>(this.url.serviceTemplates);
}
- // Get template classification information, local configuration file
- getTemplateCategory(){
- return this.http.get<any>(this.url.servicesCategory);
- }
+
//Get template input parameters
getTemplateParameters(type,template){
- let url = this.url.templateParameters.replace("*_*",type) + template.toscaModelURL; //本地模拟
- // let url = this.url.templateParameters.replace("*_*",template.uuid) + template.toscaModelURL;
+ // let url = this.url.templateParameters.replace("*_*",type) + template.toscaModelURL; //Local simulation
+ if(type == "ns"){
+ let body = {
+ csarId:template.id,
+ inputs:""
+ }
+ 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);
}
// siteAddress address
return this.http.get<any>(this.url.addressData);
}
+ getVimInfo() {
+ return this.http.get<any>(this.url.vimInfo);
+ };
+ getSdnControllers(){
+ return this.http.get<any>(this.url.sdnControllers);
+ }
+
// Create interface
- createInstance(requestBody){
- return this.http.get<any>(this.url.createService); //本地模拟
- // return this.http.post<any>(this.url.createService,requestBody);
+ createInstance(requestBody,createParams){
+ // return this.http.get<any>(this.url.createService + createParams); //Local simulation
+ return this.http.post<any>(this.url.createService,requestBody);
+ }
+ nsCreateInstance(requestBody){
+ // return this.http.get<any>(this.url.ns_createService); //Local simulation
+ return this.http.post<any>(this.url.ns_createService,requestBody);
+ }
+ nsCreateInstance2(params,requestBody){
+ // return this.http.get<any>(this.url.ns_createService2 + params); //Local simulation
+ return this.http.post<any>(this.url.ns_createService + params,requestBody);
}
// Input parameter name conversion
'serviceType': obj.serviceType
}
};
- return this.http.get<any>(this.url.deleteService); //Local simulation
-
// return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
+
// return this.http.get<any>(this.url.deleteService); //Local simulation
+ return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
}
// Query progress interface
let url = this.url.progress.replace("*_*",obj.serviceId) + obj.operationId;
return this.http.get<any>(url);
}
+ getNsProgress(jobid,responseId){
+ let url = this.url.nsProgress.replace("*_*",jobid) + responseId;
+ return this.http.get<any>(url);
+ }
// Get allotted-resource to get tp and pnf values
getAllottedResource(obj){
+++ /dev/null
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
-
-
-@Injectable()
-export class networkHttpservice {
-
- constructor(private http:HttpClient) { }
-
- // baseUrl = "./assets/json/";//本地环境
- // url={
- // "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json",
- // "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json",
- // "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json",
- // "getPInterfacesData2":this.baseUrl + "p_interfaces1.json",
- // "createLink":this.baseUrl + "status.json",
- // "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json",
- // "queryCloudUrl":this.baseUrl + "url.json",
- // "createNetwrok":this.baseUrl + "status.json",
- // "createPnf":this.baseUrl + "status.json",
- // "createTp":this.baseUrl + "status.json",
- // "createCloudLink":this.baseUrl + "status.json",
- // "createCloudUrl":this.baseUrl + "status.json",
- // "deleteLink":this.baseUrl + "status.json",
- // };
- // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//线上环境
- // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//线上环境
- baseUrl = "/api/usecaseui-server/v1/uui-sotn/";//线上环境
- url={
- "getNetworkD3Data":this.baseUrl + "getNetWorkResources",
- "getLogicalLinksData":this.baseUrl + "getLogicalLinks",
- "getPInterfacesData1":this.baseUrl + "getPinterfaceByPnfName/",
- "getPInterfacesData2":this.baseUrl + "getPinterfaceByPnfName/",
- "createLink":this.baseUrl + "createLink/",
- "querySpecificLinkInfo":this.baseUrl + "getSpecificLogicalLink/",
- "queryCloudUrl":this.baseUrl + "getHostUrl/",
- "createNetwrok":this.baseUrl + "createTopoNetwork/",
- "createPnf":this.baseUrl + "createPnf/",
- "createTp":this.baseUrl + "pnf/",
- "createCloudLink":this.baseUrl + "createLink/",
- "createCloudUrl":this.baseUrl + "createHostUrl/",
- "deleteLink":this.baseUrl + "deleteLink/",
- };
- //d3数据
- getNetworkD3Data(){
- return this.http.get<any>(this.url["getNetworkD3Data"]);
- }
- //初始化连线 logical-links
- getLogicalLinksData(){
- return this.http.get<any>(this.url["getLogicalLinksData"]);
- }
- //查询指定的node对应的tp数据
- getPInterfacesData1(paramsObj){
- return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]);
- }
- getPInterfacesData2(paramsObj){
- return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]);
- }
- //创建连线接口
- createLink(paramsObj){
- return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj);
- }
- //查询指定的单个连接线 接口
- querySpecificLinkInfo(paramsObj){
- return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]);
- }
- //查询 外部云host this.url地址 接口
- queryCloudUrl(aaiId){
- return this.http.get<any>(this.url["queryCloudUrl"]+aaiId);
- }
- //创建外部云newwork接口
- createNetwrok(paramsObj){
- return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-id"],paramsObj);
- }
- //创建外部云pnf接口
- createPnf(paramsObj){
- return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj);
- }
- //创建外部云Tp接口
- createTp(paramsObj,cloudNodeName){
- let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint";
- return this.http.put<any>(this.url["createTp"]+str,paramsObj);
- }
- //创建外部云link接口
- createCloudLink(paramsObj){
- return this.http.put<any>(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj);
- }
- //创建外部云host url接口
- createCloudUrl(paramsObj){
- return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj);
- }
- //删除连线
- deleteLink(paramsObj){
- let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"];
- return this.http.delete<any>((this.url["deleteLink"]+str));
- }
-}
font-size: 12px;
color: #147dc2;
}
+.list nz-table.table2 tr td {
+ padding: 10px 8px;
+}
+.list nz-table.table2 tr td span.action {
+ color: #3fa8eb;
+ cursor: pointer;
+ padding: 5px;
+}
+.list nz-table.table2 tr td span.cannotclick {
+ pointer-events: none;
+ color: #aaa;
+ opacity: 0.6;
+}
+.list nz-table.table2 tr td span.deleting {
+ color: red;
+ font-size: 12px;
+ display: block;
+ height: 12px;
+}
+.list nz-table.table2 tr td span.creating {
+ color: #3fa8eb;
+ font-size: 12px;
+ display: block;
+ height: 12px;
+}
.detailComponent {
position: absolute;
left: 0;
<button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
<nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
- <p>Content one</p>
- <p>Content two</p>
- <p>Content three</p>
- </nz-modal>
- <button class="create" nz-button [nzType]="'primary'" (click)="showModal2()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
- <nz-modal [(nzVisible)]="isVisible2" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk2()">
<span style="display:inline-block;width:70px;">Service: </span>
<nz-select style="width: 165px;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()">
<!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> -->
<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>
<hr>
- <span>SOTN VPN: </span>
- <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear >
- <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
- </nz-select>
+ <div *ngIf="templateTypeSelected == 'SOTN'||templateTypeSelected == 'CCVPN'">
+ <span>SOTN VPN: </span>
+ <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear >
+ <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+ </nz-select>
- <span> SITE: </span>
- <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear >
- <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
- </nz-select>
-
- <div *ngIf="templateTypeSelected == 'CCVPN'">
- <br>
- <span style="display:inline-block;width:70px;">SD-WAN: </span>
- <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear >
+ <br><br>
+ <span style="display:inline-block;width:70px;"> SITE: </span>
+ <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear >
+ <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+ </nz-select>
+
+ <div *ngIf="templateTypeSelected == 'CCVPN'">
+ <br>
+ <span style="display:inline-block;width:70px;">SD-WAN: </span>
+ <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear >
+ <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+ </nz-select>
+ </div>
+ </div>
+
+ <div *ngIf="templateTypeSelected == 'E2E Service'||templateTypeSelected == 'Network Service'">
+ <span style="display:inline-block;width:70px;">TEMPLATE: </span>
+ <nz-select style="width: 165px;" [(ngModel)]="template4" nzAllowClear >
<nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
</nz-select>
</div>
<tbody>
<ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
<tr>
- <td>{{i+1}}</td>
- <td [nzShowExpand]="data.children[0]" [(nzExpand)]="data.expand"></td>
- <td>{{data.serviceId}}</td>
- <td>{{data.name}}</td>
- <td>{{data.type}}</td>
+ <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.serviceDomain}}</td>
<td>
<span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
- 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status}}</span>
- <nz-progress *ngIf="data.status!='Active' && data.status!='Closed'" [nzPercent]="data.progress"></nz-progress>
+ 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status || "Active"}}</span>
+ <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Updating' " [nzPercent]="data.rate"></nz-progress>
+ <!-- <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> -->
</td>
<td>
- <i class="anticon anticon-setting" (click)="scaleService()"></i>
- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i>
- <i class="anticon anticon-delete" (click)="deleteService()"></i>
+ <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-setting" (click)="scaleService(data)"></i>
+ <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
+ <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-pause" (click)="stopService(data)"></i>
+ <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="restartService(data)"></i>
+ <i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
+ <i class="anticon anticon-delete" (click)="deleteService(data)"></i>
+ <!-- <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
+ (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
+ <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
+ (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> -->
</td>
</tr>
- <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.children">
+ <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
<td></td>
<td></td>
- <td>{{item.serviceId}}</td>
- <td>{{item.name}}</td>
- <td colspan="3">{{item.type}}</td>
+ <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
+ <td>{{data["service-instance-name"] || data.nsName}}</td>
+ <td colspan="3">{{item.serviceDomain}}</td>
</tr>
</ng-template>
</tbody>
</nz-table>
- <nz-table *ngIf="1"
- #nzTable2 [nzData]="tableData2"
- nzShowSizeChanger
- [nzFrontPagination]="true"
- [nzShowQuickJumper]="true"
- [nzPageSizeOptions]="[5,10,15,20]"
- [(nzPageSize)]="pageSize"
- [(nzPageIndex)]='pageIndex'
- nzSize="middle"
- [nzScroll]="{ y: '58vh' }">
- <thead nzSingleSort>
- <tr>
- <th nzWidth="5%">NO.</th>
- <th nzWidth="20%"> Instance ID </th>
- <th nzWidth="20%">Instance Name</th>
- <!-- <th nzWidth="10%">Type</th> -->
- <th nzWidth="25%">Description</th>
- <th nzWidth="15%">Status</th>
- <th nzWidth="10%">Action</th>
- </tr>
- </thead>
- <tbody>
- <!-- <ng-template ngFor let-data [ngForOf]="nzTable2.data" let-i="index"> -->
- <tr *ngFor="let item of nzTable2.data; let i = index; ">
- <td>{{pageSize*(pageIndex-1) + i+1}}</td>
- <td>{{item.sotnvpnSer['service-instance-id']}}</td>
- <td>{{item.sotnvpnSer['service-instance-name']}}</td>
- <!-- <td>{{item.type}}</td> -->
- <td>{{item.sotnvpnSer.description}}</td>
- <td>
- <span *ngIf="item.sotnvpnSer.status!='creating' && item.sotnvpnSer.status!='deleting'">{{item.sotnvpnSer.status}}</span>
- <span *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [ngClass]="{'deleting':item.sotnvpnSer.status=='deleting','creating':item.sotnvpnSer.status=='creating'}">{{item.sotnvpnSer.status}}</span>
- <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress>
- </td>
- <td>
- <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
- (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
- <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
- (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span>
- </td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
</div>
<div class="detailComponent" *ngIf="detailshow">
(closeCreate)="closeCreate($event)">
</app-ccvpn-creation>
</div>
+<div class="createComponent" *ngIf="createshow2">
+ <app-e2e-creation
+ [createParams]="createData"
+ (nsCloseCreate)="nsCloseCreate($event)"
+ (e2eCloseCreate)="e2eCloseCreate($event)">
+ </app-e2e-creation>
+</div>
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file 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.
+*/
.title {
font: 700 18px/18px "思源黑体";
color: #4c5e70;
}
}
+.list nz-table.table2 tr td {
+ padding: 10px 8px;
+}
+.list nz-table.table2 tr td span.action {
+ color: #3fa8eb;
+ cursor: pointer;
+ padding: 5px;
+}
+.list nz-table.table2 tr td span.cannotclick {
+ pointer-events: none;
+ color: #aaa;
+ opacity: 0.6;
+}
+.list nz-table.table2 tr td span.deleting {
+ color: red;
+ font-size: 12px;
+ display: block;
+ height: 12px;
+}
+.list nz-table.table2 tr td span.creating {
+ color: #3fa8eb;
+ font-size: 12px;
+ display: block;
+ height: 12px;
+}
+
.detailComponent {
position: absolute;
left: 0;
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file 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.
+*/
import { Component, OnInit, HostBinding } from '@angular/core';
import { MyhttpService } from '../../myhttp.service';
import { slideToRight } from '../../animates';
@HostBinding('@routerAnimate') routerAnimateState;
constructor(private myhttp: MyhttpService, private modalService: NzModalService) { }
+
ngOnInit() {
this.getallCustomers();
- this.getTemplateSubTypes();
this.inputNamests();
}
- // 筛选框（下拉框）customer servicetype
+ // customer servicetype
customerList = [];
customerSelected = {name:null,id:null};
serviceTypeList = [];
- serviceTypeSelected = {name:null,id:null};
+ serviceTypeSelected = {name:null};
- // 获取所有customer
+ //
getallCustomers(){
this.myhttp.getAllCustomers()
.subscribe((data)=>{
this.getTableData();
}
- // 模态框（对话框） create
+
+ // Create modal box 2 (dialog box) create -------------------------------
isVisible = false;
showModal(): void {
this.isVisible = true;
- }
- handleOk(): void {
- console.log('Button ok clicked!');
- this.isVisible = false;
- }
- handleCancel(): void {
- console.log('Button cancel clicked!');
- this.isVisible = false;
- this.isVisible2 = false;
- }
-
- // 创建模态框2（对话框） create -------------------------------
- isVisible2 = false;
- showModal2(): void {
- this.isVisible2 = true;
- this.templates1 = []; //多次创建会push累积名字，从新置空
- this.templates2 = [];
- this.templates3 = [];
this.getAlltemplates();
}
- // 服务
+ //
templateTypeSelected = "SOTN";
choseTemplateType(){
- // this.filterTemplates();//分类
+ this.getAlltemplates();
}
- // 模板
- templates = []; templates1;templates2;templates3;
+ //
+ templates = [];
template1={name:null};
template2={name:null};
template3={name:null};
- // 模板分类数据,创建、获取实例分类共用
- templateSubTypes = {}; //子类，sotnvpn、site、sdwan
- getTemplateSubTypes(){
- this.myhttp.getServicesCategory()
- .subscribe((data)=>{
- this.templateSubTypes = data;
- },(err)=>{
- console.log("getTemplateTypes err")
- })
- }
+ template4={name:null};
- getAlltemplates(){ //获取所有模板类型
- this.myhttp.getAllServiceTemplates()
+ getAlltemplates(){ //
+ this.myhttp.getAllServiceTemplates(this.templateTypeSelected)
.subscribe((data)=>{
console.log(data)
this.templates = data;
- this.template1 = data[0];
- this.template2 = data[1];
- this.template3 = data[2];
- // this.filterTemplates();//分类
+ if(this.templateTypeSelected=="Network Service"){
+ this.templates = data.map((item)=>{return {name:item.packageInfo.csarName,id:item.csarId,packageInfo:item.packageInfo}});
+ }
+ this.template1 = this.templates[0];
+ this.template2 = this.templates[1];
+ this.template3 = this.templates[2];
+ this.template4 = this.templates[0];
+
},(err)=>{
})
}
- // filterTemplates(){ //模板类型分类，本地配置文件
- // this.templates1 = [];
- // this.templates2 = [];
- // this.templates3 = [];
- // this.templates.forEach((item)=>{
- // this.templateSubTypes[this.templateTypeSelected].sotnvpn.find((d)=>{
- // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID
- // })?this.templates1.push(item):null;
- // this.templateSubTypes[this.templateTypeSelected].site.find((d)=>{
- // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID
- // })?this.templates2.push(item):null;
- // if(this.templateTypeSelected=="CCVPN"){
- // this.templateSubTypes[this.templateTypeSelected].sdwan.find((d)=>{
- // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID
- // })?this.templates3.push(item):null;
- // }
- // })
- // this.template1 = this.templates1[0];
- // this.template2 = this.templates2[0];
- // if(this.templates3[0]){
- // this.template3 = this.templates3[0];
- // }
- // }
- // 确定、取消
+
+ //
createshow = false;
+ createshow2 = false;
createData:Object={};
- handleOk2(): void {
+ handleOk(): void {
console.log('Button ok clicked!');
- this.isVisible2 = false;
- 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.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.createshow = 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};
+ this.createshow2 = true;
+ }
- this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2;
- this.createshow = true;
}
- // handleCancel(): void {
- // console.log('Button cancel clicked!');
- // this.isVisible2 = false;
- // }
+ handleCancel(): void {
+ console.log('Button cancel clicked!');
+ this.isVisible = false;
+ }
- //表格数据
+ //tableData
tableData = [];
pageIndex = 1;
pageSize = 10;
sortName = null;
sortValue = null;
getTableData(){
- // 查询参数: customer serviceType 当前页码，每页条数，排序方式
+ // params: customer serviceType pageIndex，pageSize，sortName
let paramsObj = {
- customer:this.customerSelected,
- serviceType:this.serviceTypeSelected,
+ customer:this.customerSelected.id,
+ serviceType:this.serviceTypeSelected.name,
pageIndex:this.pageIndex,
pageSize:this.pageSize,
serviceIdSort:this.sortValue
updataService(){
console.log("updataService!");
}
- deleteService(){
- console.log("deleteService!");
- }
-
- //表格数据
- tableData2 = [];
- getTableData2(){
- let params = {
- customerId:this.customerSelected.id,
- serviceType:this.serviceTypeSelected
- }
- this.myhttp.getInstanceTableData(params)
- .subscribe((data)=>{
- this.pageIndex = 1;
- this.tableData2 = [];
- console.log(data)
- // data.results.forEach((item)=>{
- // item["sotnvpnSer"] = item["service-subscription"]["service-instances"]["service-instance"].find((d)=>{
- // return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{
- // return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
- // })?item["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{
- // return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
- // })?item["Type"]="CCVPN":null
- // })
-
- // if(item["sotnvpnSer"]){
- // this.tableData2.push(item);
- // }
- // })
-
- //---------数据结构有问题，模拟只有一组数据情况---------//
- data["sotnvpnSer"] = data["service-instance"].find((d)=>{
- return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{
- return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
- })?d["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{
- return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
- })?d["Type"]="CCVPN":null
- })
- let inputParams = JSON.parse(data["sotnvpnSer"]["input-parameters"]).service.parameters.requestInputs;
- let descriptionName = Object.keys(inputParams).find((item)=>{ return item.endsWith("_description")});
- data["sotnvpnSer"]["description"] = inputParams[descriptionName];
- data["sotnvpnSer"]["status"] = "Active";
- this.tableData2.push(data);
+ stopService(data){
- console.log(this.tableData2)
- },(err)=>{
- console.log(err);
- })
}
+ restartService(data){
- // 显示详情
+ }
+ //
detailshow = false;
detailData:Object;
- showDetail(service){
+ serviceDetail(service){
service["siteSer"]=[];
service["sdwanSer"]=[];
service["customer"]=this.customerSelected;
service["serviceType"] = this.serviceTypeSelected;
- // service["service-subscription"]["service-instances"]["service-instance"].forEach((item)=>{
- // this.templateSubTypes[service.Type].site.find((d)=>{
- // return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
- // })?service["siteSer"].push(item):null;
- // if(service.Type=="CCVPN"){
- // this.templateSubTypes[service.Type].sdwan.find((d)=>{
- // return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
- // })?service["sdwanSer"].push(item):null;
- // }
- // })
- service["service-instance"].forEach((item)=>{
- this.templateSubTypes[service.sotnvpnSer.Type].site.find((d)=>{
- return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
- })?service["siteSer"].push(item):null;
- if(service.sotnvpnSer.Type=="CCVPN"){
- this.templateSubTypes[service.sotnvpnSer.Type].sdwan.find((d)=>{
- return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
- })?service["sdwanSer"].push(item):null;
+
+ service.childServiceInstances.forEach((item)=>{
+ if(item.serviceDomain=="SITE"){
+ service.siteSer.push(item);
+ }else if(item.serviceDomain=="SDWAN"){
+ service.sdwanSer.push(item);
}
})
this.detailshow = true;
this.detailData = service;
console.log(service);
}
- // 删除 确认模态框
- deleteInstace(service){
- // 创建确认框
+ // deleteService(){
+ // console.log("deleteService!");
+ // }
+
+
+ //
+ deleteService(service){
this.modalService.confirm({
nzTitle : 'Are you sure delete this instance?',
- nzContent : `Instance ID: <b class="deleteModelContent"> ${service.sotnvpnSer["service-instance-id"]}</b>`,
+ nzContent : `Instance ID: <b class="deleteModelContent"> ${service["service-instance-id"]}</b>`,
nzOkText : 'Yes',
nzOkType : 'danger',
nzOnOk : () => {
console.log(service);
- let allprogress = {}; //所有进度值，以operationId为键
- let querypros = []; //所有查询
- service.sotnvpnSer.rate = 0;
- service.sotnvpnSer.status = "deleting";
- // let deletePros = service["service-subscription"]["service-instances"]["service-instance"].map((item)=>{
- // let id = item["service-instance-id"];
- // return new Promise((res,rej)=>{
- // this.myhttp.deleteInstance(id)
- // .subscribe((data)=>{
- // let obj = {serviceId:id,operationId:data.operationId}
- // let updata = (prodata)=>{
- // allprogress[prodata.operationId] = prodata.progress;
- // let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
- // service.sotnvpnSer["rate"]=average;
- // }
- // querypros.push(this.queryProgress(obj,updata));
- // res();
- // })
- // })
- // })
- let deletePros = service["service-instance"].map((item)=>{
+ let allprogress = {}; //
+ let querypros = []; //
+ service.rate = 0;
+ service.status = "Deleting";
+
+ service["childServiceInstances"].push({"service-instance-id":service["service-instance-id"]})
+
+ let deletePros = service["childServiceInstances"].map((item)=>{
let params = {
globalSubscriberId:this.customerSelected.id,
serviceType:this.serviceTypeSelected,
let updata = (prodata)=>{
allprogress[prodata.operationId] = prodata.progress;
let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
- service.sotnvpnSer["rate"]=average;
+ service["rate"]=average;
}
querypros.push(this.queryProgress(obj,updata));
res();
Promise.all(deletePros).then(()=>{
Promise.all(querypros).then((data)=>{
console.log(data);
- service.sotnvpnSer.rate = 100;
- service.sotnvpnSer.status = "deleted";
- setTimeout(()=>{
- this.getTableData();
- },1000)
+ service.rate = 100;
+ service.status = "completed";
+ let hasUndone = this.tableData.some((item)=>{
+ return item.rate < 100;
+ })
+ if(!hasUndone){
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ }
})
})
});
}
-
+ //ccvpn sotn createservice
+ parentServiceInstanceId="";
closeCreate(obj){
if(!obj){
- this.createshow = false; //关闭创建窗口
+ this.createshow = false; //close
return false;
}
- this.createshow = false; //关闭创建窗口
+ this.createshow = false;
console.log(obj);
- let newData; //主表格中新创建的服务数据
- let stageNum = 0; //不同阶段进度，用于后续服务进度相加；
- // --------------------------------------------------------------------------
- // obj.groupbody.map((group)=>{ //所有创建
- // return this.createService(group)
- // })
- // obj.sitebody.map((group)=>{ //所有创建
- // console.log(group)
- // return this.createService(group)
- // })
- // -----------------------------------------------------------------------------
- this.createService(obj.vpnbody).then((data)=>{
+ let newData; //Newly created service data for the main table
+ let stageNum = 0; //Different stages of progress, used to add up subsequent service progress;
+
+ let createParams = "?customerId="+this.customerSelected.id +
+ "&serviceType="+this.serviceTypeSelected.name +
+ "&serviceDomain="+this.templateTypeSelected +
+ "&parentServiceInstanceId=";
+ this.createService(obj.vpnbody,createParams).then((data)=>{
console.log(data)
- newData = { //主表格中新创建的服务数据
+ this.parentServiceInstanceId = data["serviceId"]; //------------updata parentServiceInstanceId
+ newData = { //
'service-instance-id':data["serviceId"],
'service-instance-name':obj.vpnbody.service.name,
- description:obj.vpnbody.service.description,
- status:"creating",
+ serviceDomain:this.templateTypeSelected,
+ childServiceInstances:[],
+ status:"Creating",
rate:0,
}
- this.tableData2 = [{sotnvpnSer:newData},...this.tableData2];
+ this.tableData = [newData,...this.tableData];
let updata = (prodata)=>{
newData.rate = Math.floor(prodata.progress/3);
}
return this.queryProgress(queryParams,updata);
}).then((data)=>{
console.log(data);
- stageNum = newData.rate; //阶段进度值更新；
- let allprogress = {}; //所有进度值，以operationId为键
- let querypros = []; //所有查询
- let createPros = obj.groupbody.map((group)=>{ //所有创建
- return this.createService(group).then((data)=>{
+ stageNum = newData.rate; //Phase progress value update;
+ let allprogress = {}; //
+ let querypros = []; //All the query
+ // Additional parameters
+ let createParams = "?customerId="+this.customerSelected.id +
+ "&serviceType="+this.serviceTypeSelected.name +
+ "&serviceDomain="+"SDWAN" +
+ "&parentServiceInstanceId="+this.parentServiceInstanceId;
+
+ let createPros = obj.groupbody.map((group)=>{ //
+ return this.createService(group,createParams).then((data)=>{
console.log(data);
let updata = (prodata)=>{
allprogress[prodata.operationId] = prodata.progress;
})
return new Promise((res)=>{
- Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕
+ Promise.all(createPros).then(()=>{ //All queries in querypros are added only once created
Promise.all(querypros).then((data)=>{
console.log(data);
res("site--begin");
})
}).then((data)=>{
console.log(data);
- stageNum = newData.rate; //阶段进度值更新；
+ stageNum = newData.rate; //Phase progress value update;
let allprogress = {};
- let querypros = []; //所有查询
- let createPros = obj.sitebody.map((group)=>{ //所有创建
- return this.createService(group).then((data)=>{
+ let querypros = []; //All the query
+ // Additional parameters
+ let createParams = "?customerId="+this.customerSelected.id +
+ "&serviceType="+this.serviceTypeSelected.name +
+ "&serviceDomain="+"SITE" +
+ "&parentServiceInstanceId="+this.parentServiceInstanceId;
+ let createPros = obj.sitebody.map((group)=>{
+ return this.createService(group,createParams).then((data)=>{
console.log(data);
let updata = (prodata)=>{
allprogress[prodata.operationId] = prodata.progress;
})
})
console.log(createPros);
- Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕
+ Promise.all(createPros).then(()=>{ //
Promise.all(querypros).then((data)=>{
console.log(data);
newData.rate = 100;
newData.status = "completed";
- setTimeout(()=>{
- this.getTableData();
- },1000)
+ let hasUndone = this.tableData.some((item)=>{
+ return item.rate < 100;
+ })
+ if(!hasUndone){
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ }
})
})
})
}
- createService(params){
+ e2eCloseCreate(obj){
+ if(!obj){
+ this.createshow2 = false; //
+ return false;
+ }
+ this.createshow2 = false; //
+ console.log(obj);
+ let newData; //
+ let createParams = "?customerId="+this.customerSelected.id +
+ "&serviceType="+this.serviceTypeSelected.name +
+ "&serviceDomain="+this.templateTypeSelected +
+ "&parentServiceInstanceId=";
+ this.createService(obj,createParams).then((data)=>{
+ console.log(data);
+ newData = { //
+ 'service-instance-id':data["serviceId"],
+ 'service-instance-name':obj.name,
+ serviceDomain:this.templateTypeSelected,
+ childServiceInstances:[],
+ status:"Creating",
+ rate:0,
+ }
+
+ this.tableData = [newData,...this.tableData];
+ let updata = (prodata)=>{
+ newData.rate = prodata.progress;
+ }
+ let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
+ return this.queryProgress(queryParams,updata);
+ }).then((data)=>{
+ console.log(data);
+ newData.rate = 100;
+ newData.status = "completed";
+ let hasUndone = this.tableData.some((item)=>{
+ return item.rate < 100;
+ })
+ if(!hasUndone){
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ }
+ })
+
+ }
+
+ nsCloseCreate(obj){
+ if(!obj){
+ this.createshow2 = false; //
+ return false;
+ }
+ this.createshow2 = false; //
+ console.log(obj);
+ let newData; //
+ // step1
+ this.myhttp.nsCreateInstance(obj.step1)
+ .subscribe((data)=>{
+ console.log(data);
+ newData = { //
+ 'service-instance-id':data.nsInstanceId,
+ 'service-instance-name':obj.step1.nsName,
+ serviceDomain:this.templateTypeSelected,
+ childServiceInstances:[],
+ status:"Creating",
+ rate:0,
+ }
+ this.tableData = [newData,...this.tableData];
+ let createParams = "?ns_instance_id=" + data.nsInstanceId +
+ "&customerId="+this.customerSelected.id +
+ "&serviceType="+this.serviceTypeSelected.name +
+ "&serviceDomain="+"SITE" +
+ "&parentServiceInstanceId="+this.parentServiceInstanceId;
+ // step2
+ this.createNsService(createParams,obj.step2).then((jobid)=>{
+
+ let updata = (prodata)=>{
+ newData.rate = prodata.responseDescriptor.progress;
+ }
+
+ return this.queryNsProgress(jobid,updata);
+ }).then((data)=>{
+ console.log(data);
+ newData.rate = 100;
+ newData.status = "completed";
+ let hasUndone = this.tableData.some((item)=>{
+ return item.rate < 100;
+ })
+ if(!hasUndone){
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ }
+ })
+
+
+ })
+ }
+
+ createService(requestBody,createParams){
let mypromise = new Promise((res,rej)=>{
- this.myhttp.createInstance(params)
+ this.myhttp.createInstance(requestBody,createParams)
.subscribe((data)=>{
res(data.service);
})
return mypromise;
}
+ createNsService(id,obj){
+ let mypromise = new Promise((res,rej)=>{
+ this.myhttp.nsCreateInstance2(id,obj)
+ .subscribe((data)=>{
+ res(data.jobId);
+ })
+ })
+ return mypromise;
+ }
queryProgress(obj,callback){
let mypromise = new Promise((res,rej)=>{
})
return mypromise;
}
+ queryNsProgress(jobid,callback){
+ let mypromise = new Promise((res,rej)=>{
+ // let data = {
+ // "jobId": "string",
+ // "responseDescriptor": {
+ // "status": "string",
+ // "progress": 0,
+ // "statusDescription": "string",
+ // "errorCode": "string",
+ // "responseId": "string",
+ // "responseHistoryList": [
+ // {
+ // "status": "string",
+ // "progress": "string",
+ // "statusDescription": "string",
+ // "errorCode": "string",
+ // "responseId": "string"
+ // }
+ // ]
+ // }
+ // }
+ let requery = (responseId)=>{
+ this.myhttp.getNsProgress(jobid,responseId)
+ .subscribe((data)=>{
+ if(data.responseDescriptor.progress==undefined){
+ console.log(data);
+ setTimeout(()=>{
+ requery(data.responseDescriptor.responseId);
+ },5000)
+ return false;
+ }
+ if(data.responseDescriptor.progress < 100){
+ callback(data);
+ setTimeout(()=>{
+ requery(data.responseDescriptor.responseId);
+ },5000)
+ }else {
+ res(data);
+ }
+ })
+ // setTimeout(()=>{
+ // console.log(data.responseDescriptor.progress)
+ // data.responseDescriptor.progress++;
+ // if(data.responseDescriptor.progress<100){
+ // callback(data);
+ // requery(data.responseDescriptor.responseId)
+ // }else{
+ // callback(data);
+ // res(data)
+ // }
+ // },100)
+ }
+ requery(0);
+ })
+ return mypromise;
+ }
- // 名字转换参数匹配 --> 传给子组件用
+ // -->
namesTranslate:Object;
inputNamests(){
this.myhttp.inputNamesTransform()
Code Review / usecase-ui.git / commitdiff