summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-04-11 18:04:43 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-04-11 18:04:55 +0800
commite60a7298e1d9d83c887cd53fd8f9df71753b8f97 (patch)
treeffc7cd6386ec89ea0b03b5fa7d1d91dd4681215b
parentbf099f65e6e5b7b43458eb58bd75e2b134c63b74 (diff)
Service instance lifecycle management
Change-Id: I4e441c91fb0a809d9c7a0517ba747897f58c1283 Issue-ID: USECASEUI-218 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.html61
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.less17
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.ts45
-rw-r--r--usecaseui-portal/src/styles.less12
4 files changed, 55 insertions, 80 deletions
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..de137fd4 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,7 +40,7 @@
<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()"
+ <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="Service Creation" (nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()">
<div class="select-list">
<span style="display:inline-block;">Customer: </span>
@@ -48,47 +48,19 @@
<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)]="serviceTypeSelected2.name" nzAllowClear (ngModelChange)="choseTemplateType()">
<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>
- <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> -->
- <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>
+ <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 == '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>
-
<div *ngIf="templateTypeSelected == 'E2E Service'">
<div class="select-list">
<span style="display:inline-block;width:70px;">Orchestrator: </span>
@@ -97,14 +69,7 @@
</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>
@@ -119,7 +84,7 @@
<span class="round">{{item.serviceDomain}}</span>
<div class="top-list-text">
<span>{{item.number}}</span><br>
- <span>{{item.serviceDomain}}&nbsp;&nbsp;Service Instances</span>
+ <span>{{item.detailName}}</span>
</div>
</li>
</ul>
@@ -142,9 +107,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 +119,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}}
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..915afd3a 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
@@ -74,7 +74,7 @@ hr {
width:116px;
height:42px;
background:#0DA9E2;
- border-radius:2px;
+ border-radius:6px;
margin-top: -15px;
span {
color: #fff;
@@ -100,10 +100,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 +114,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 +151,7 @@ hr {
display: inline-block;
font-size: 22px;
font-weight: 500;
- margin-bottom: 10px;
+ margin-bottom: 20px;
}
}
.list {
@@ -301,7 +302,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..2efe231a 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
@@ -51,19 +51,22 @@ export class ServicesListComponent implements OnInit {
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": "SOTN",
+ // "number": 30
+ // },
{
"serviceDomain": "CCVPN",
- "number": 40
+ "number": 40,
+ "detailName":"Cross Domain and Cross Layer VPN"
}
];
@@ -153,7 +156,8 @@ export class ServicesListComponent implements OnInit {
this.getAlltemplates();
}
//
- templateTypeSelected = "SOTN";
+ templateTypeSelected = this.serviceTypeList2["name"];
+
choseTemplateType(){
this.getallOrchestrators();
this.getAlltemplates();
@@ -180,11 +184,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 +201,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 +252,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)=>{
@@ -534,7 +533,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 +567,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 +604,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 +656,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 +732,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..845187a5 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;
+ }
}
}