summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/services/services-list
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/services/services-list')
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.html57
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.less100
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.ts33
3 files changed, 155 insertions, 35 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 4a1a44d3..9e36c7b3 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
@@ -14,7 +14,8 @@
limitations under the License.
-->
<div class="action ant-tabs-bar">
- <span>Customer: </span>
+
+ <span><i style="margin-right: 10px"><img src="../../../assets/images/customer.png" alt=""></i>Customer: </span>
<nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
<button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
</button>
@@ -25,8 +26,7 @@
</ul>
</nz-dropdown>
- &nbsp;&nbsp;
- <span>Service Type: </span>
+ <span style="margin-left:40px"><i style="margin-right: 10px"><img src="../../../assets/images/service-type.png" alt=""></i>Service Type: </span>
<nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
<button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i>
</button>
@@ -40,10 +40,22 @@
<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="CREATE" (nzOnCancel)="handleCancel()"
+ <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="TEMPLATE" (nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()">
<div class="select-list">
- <span style="display:inline-block;width:70px;">Service: </span>
+ <span style="display:inline-block;">Customer: </span>
+ <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear>
+ <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>
+ <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> -->
@@ -62,14 +74,14 @@
</nz-select>
</div>
<div class="select-list">
- <span style="display:inline-block;width:70px;"> SITE: </span>
+ <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;width:70px;">SD-WAN: </span>
+ <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>
@@ -144,8 +156,10 @@
<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 [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN'}">
- {{data.serviceDomain}}
+ <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}}
+ </p>
</td>
<td>
<span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding',
@@ -156,11 +170,24 @@
</td>
<td>
<i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
- class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
+ class="anticon anticon-bars" (click)="serviceDetail(data)"></i>
<i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete"
(click)="deleteModel(data)"></i>
- <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
- class="anticon anticon-setting" (click)="scaleService(data)"></i>
+ <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-ellipsis"
+ (click)="iconMoreShow(data)" style="transform: rotate(90deg);"></i>
+
+ <ul *ngIf="data.iconMore==true " class="icon-more">
+ <li>
+ <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+ class="anticon anticon-setting" (click)="scaleService(data)"></i>
+ <span>scale</span>
+ </li>
+ <li>
+ <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+ class="anticon anticon-cloud-upload-o" (click)="update(data)"></i>
+ <span>update</span>
+ </li>
+ </ul>
<!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
<!-- <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}"
*ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> -->
@@ -171,7 +198,11 @@
<td></td>
<td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td>
<td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td>
- <td>{{item.serviceDomain}}</td>
+ <td>
+ <p [ngClass]="{'vnfColor':item.serviceDomain=='vnf','siteColor':item.serviceDomain=='SITE','SDWANColor':item.serviceDomain=='SDWAN'}">
+ {{item.serviceDomain}}
+ </p>
+ </td>
<td>
<span [ngClass]="{'healing':data.statusClass=='1004'}">{{data.tips}}</span>
<nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress>
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 55419785..ec4a7f76 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
@@ -73,7 +73,7 @@ hr {
top:50%;
width:116px;
height:42px;
- background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%);
+ background:#0DA9E2;
border-radius:2px;
margin-top: -15px;
span {
@@ -89,7 +89,8 @@ hr {
border: none;
}
.create:hover{
- background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
+ background:#09C6E2;
+ //background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
}
}
@@ -100,21 +101,34 @@ hr {
.top-list{
position: relative;
width:22%;
- height:160px;
- margin: 15px 1.5%;
- float: left;
- background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%);
- box-shadow:0px 10px 15px 2px rgba(222,222,222,1);
+ height:184px;
+ margin: 15px 1.5%;
+ 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%);
border-radius:2px;
}
+.top-num .top-list:nth-child(2){
+ background:url("../../../assets/images/servicelist-ns.png") no-repeat;
+ background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(3){
+ background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat;
+ background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(4){
+ background:url("../../../assets/images/servicelist-sotn.png") no-repeat;
+ background-size: 100% 100%;
+}
.top-list .round{
position: absolute;
width: 60px;
height: 60px;
line-height: 60px;
- text-align: center;
- top:50%;
- left: 10px;
+ text-align: center;
+ top:45%;
+ left: 50px;
margin-top: -30px;
background:#E0EDFF;
border:2px solid rgba(224,237,255,1);
@@ -128,12 +142,15 @@ hr {
text-align: right;
height: 40px;
line-height: 20px;
- top:50%;
+ top:45%;
margin-top: -20px;
- right: 15px;
+ right: 50px;
color: #fff;
span:nth-child(1){
+ display: inline-block;
font-size: 22px;
+ font-weight: 500;
+ margin-bottom: 10px;
}
}
.list {
@@ -143,6 +160,7 @@ hr {
nz-table {
tbody {
td {
+ position: relative;
span.active {
font-size: 14px;
color: #147dc2;
@@ -188,6 +206,26 @@ hr {
color: #aaa;
opacity: 0.6;
}
+ .icon-more{
+ position: absolute;
+ width: 115px;
+ height: 135px;
+ //height: 156px;
+ top:50px;
+ padding:15px 0 0 15px;
+ background: #ffffff;
+ z-index: 2;
+ border-radius: 5px;
+ box-shadow: 0px 10px 15px 2px rgba(247, 247, 247, 0.5);
+ li{
+ margin-bottom:10px;
+ line-height: 20px;
+ text-align: left;
+ span{
+ margin-left: 5px;
+ }
+ }
+ }
}
tr.childtr {
td {
@@ -223,26 +261,48 @@ hr {
z-index: 3;
}
/*2019.01.14*/
-.e2eColor{
- color: #5B45E7;
+.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{
+ color: #FFFFFF;
+ width:120px;
+ height: 34px;
+ line-height: 34px;
+ margin-bottom: 0!important;
+ text-align: center;
+ background:linear-gradient(131deg,rgba(79,151,239,1) 0%,rgba(48,217,196,1) 100%);
+ border-radius:4px
}
.nsColor{
- color: #F96D7D;
+ background:linear-gradient(135deg,rgba(252,167,91,1) 0%,rgba(253,203,106,1) 100%);
}
-.ccvpnColor{
- color: #3E86EC;
+.ccvpnColor{
+ background:linear-gradient(135deg,rgba(81,113,251,1) 0%,rgba(201,123,254,1) 100%);
}
.sotnColor{
- color: #FFB629;
+ background:linear-gradient(133deg,rgba(24,179,170,1) 0%,rgba(70,216,178,1) 100%);
+}
+.voLTEColor{
+ background:#0AD251;
}
+.vnfColor,.siteColor,.SDWANColor{
+ color:rgba(60,79,140,0.5);
+ width:120px;
+ height: 34px;
+ line-height: 34px;
+ margin-bottom: 0!important;
+ text-align: center;
+ background:rgba(238,238,238,1);
+ border-radius:4px;
+}
+
.select-list{
- width: 280px;
+ width: 320px;
height: 32px;
line-height: 32px;
margin: 25px auto;
}
.select-list>span{
- text-align: left;
+ text-align: right;
+ width: 110px!important;
line-height: 32px;
}
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 0b550caa..ed724383 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
@@ -35,14 +35,19 @@ export class ServicesListComponent implements OnInit {
}
// customer servicetype
isSol005Interface = false;
- customerList = [];
orchestratorList = [];
+ customerList = [];
+ customerList2 = [];
customerSelected = {name:null,id:null};
- orchestratorSelected = {name:null,id:null};
+ customerSelected2 = {name: null, id: null};
serviceTypeList = [];
+ serviceTypeList2 = [];
serviceTypeSelected = {name:null};
+ serviceTypeSelected2 = {name: null};
+ orchestratorSelected = {name:null,id:null};
listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters'));
language="en";
+ iconMore=false;
serviceMunber = [
{
"serviceDomain": "E2E",
@@ -62,6 +67,14 @@ export class ServicesListComponent implements OnInit {
}
];
+ //The icon behind each row of data in the table expands
+ iconMoreShow(data){
+ if(data.iconMore==false){
+ data.iconMore=true;
+ }else {
+ data.iconMore=false;
+ }
+ }
getallCustomers(){
console.log(this.listSortMasters);
this.myhttp.getAllCustomers()
@@ -71,7 +84,15 @@ export class ServicesListComponent implements OnInit {
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) {
+ console.log("customerList2.length == 0", this.customerList2);
+ return false;
+ }
this.customerSelected = this.customerList[0];
+ this.customerSelected2 = this.customerList2[0];
this.choseCustomer(this.customerSelected);
// console.log(this.customers)
})
@@ -94,11 +115,19 @@ export class ServicesListComponent implements OnInit {
this.myhttp.getServiceTypes(this.customerSelected)
.subscribe((data)=>{
this.serviceTypeList = data.map((item)=>{return {name:item["service-type"]}});
+ this.serviceTypeList2 = data.map((item) => {
+ return {name: item["service-type"]}
+ });
if(this.serviceTypeList.length==0){
console.log("serviceTypeList.length == 0",this.serviceTypeList);
return false;
}
+ if (this.serviceTypeList2.length == 0) {
+ console.log("serviceTypeList2.length == 0", this.serviceTypeList2);
+ return false;
+ }
this.serviceTypeSelected = this.serviceTypeList[0];
+ this.serviceTypeSelected2 = this.serviceTypeList2[0];
this.choseServiceType(this.serviceTypeSelected);
// console.log(this.listServiceTypes);
})