diff options
Diffstat (limited to 'usecaseui-portal/src/app/services/services-list')
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> - - <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); }) |