diff options
Diffstat (limited to 'usecaseui-portal/src/app/services')
3 files changed, 42 insertions, 17 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 28162251..ff977190 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 @@ -38,7 +38,8 @@ </nz-dropdown> <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i - class="anticon anticon-plus-circle-o"></i><span> Create </span></button> + 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()" (nzOnOk)="handleOk()"> <div class="select-list"> @@ -96,7 +97,7 @@ </div> </li> </ul> - <div class="list"> + <div class="list" [ngClass]="{'listdisplay':listDisplay == true}"> <nz-table *ngIf="1" #nzTable [nzData]="tableData" nzShowSizeChanger @@ -136,7 +137,8 @@ <span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding', 'updating':data.statusClass=='Updating','deleting':data.statusClass=='1002','creating':data.statusClass=='1001', 'scaling':data.statusClass=='1003','healing':data.statusClass=='1004'}">{{data.tips}}</span> - <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"></nz-progress> + <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate" [nzShowInfo]="false" + nzStatus="active"></nz-progress> </td> <td> <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" @@ -161,7 +163,7 @@ <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress> </td> <td> - <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" + <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" class="anticon anticon-reload" (click)="healService(item)"></i> </td> </tr> @@ -169,7 +171,8 @@ </tbody> </nz-table> - <nz-modal [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk()"> + <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" + (nzOnOk)="scaleOk()"> <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance? </h3> Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || @@ -194,7 +197,7 @@ </nz-select> </div> </nz-modal> - <nz-modal [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()" + <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk()"> <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure delete this instance? </h3> @@ -211,7 +214,8 @@ [(ngModel)]="gracefulTerminationTimeout"> </div> </nz-modal> - <nz-modal [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" (nzOnOk)="healOk()"> + <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" + (nzOnOk)="healOk()"> <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance? </h3> Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || 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 3ef3fde2..0e59ca2e 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 @@ -24,6 +24,9 @@ hr { background-color: #dce1e7; margin-bottom: 20px; } +.ant-tabs-bar{ + margin-bottom: 0!important; +} .action { margin-bottom: 15px; padding: 28px; @@ -85,16 +88,20 @@ hr { .create.ant-btn.ant-btn-primary{ border: none; } + .create:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + } } .top-num{ overflow: auto; + width: 100%; } .top-list{ position: relative; - width:360px; + width:22%; height:160px; - margin: 15px 15px 30px 15px; + 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); @@ -102,17 +109,17 @@ hr { } .top-list .round{ position: absolute; - width:80px; - height:80px; - line-height: 80px; + width: 60px; + height: 60px; + line-height: 60px; text-align: center; top:50%; left: 10px; - margin-top: -40px; + margin-top: -30px; background:#E0EDFF; border:2px solid rgba(224,237,255,1); border-radius: 50%; - font-size:18px; + font-size:16px; font-family:ArialMT; color:#3C4F8C; } @@ -123,8 +130,11 @@ hr { line-height: 20px; top:50%; margin-top: -20px; - right: 20px; + right: 15px; color: #fff; + span:nth-child(1){ + font-size: 22px; + } } .list { background-color: #fff; @@ -207,9 +217,9 @@ hr { top: 0; width: 100%; height: 100vh; - background-color: #f3f3f3; + background-color: #F7F8FC; overflow-y: auto; - padding: 20px 32px; + //padding: 20px 32px; z-index: 3; } /*2019.01.14*/ @@ -236,3 +246,6 @@ hr { line-height: 32px; } +.listdisplay{ + display: none; +}
\ No newline at end of file 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 7149ae2f..2dfbc942 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 @@ -140,6 +140,7 @@ export class ServicesListComponent implements OnInit { // createshow = false; createshow2 = false; + listDisplay = false; createData:Object={}; handleOk(): void { // console.log('Button ok clicked!'); @@ -153,6 +154,7 @@ export class ServicesListComponent implements OnInit { }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.listDisplay = true; } } @@ -461,9 +463,11 @@ export class ServicesListComponent implements OnInit { closeCreate(obj){ if(!obj){ this.createshow = false; //close + this.listDisplay = false; return false; } this.createshow = false; + this.listDisplay = false; console.log(obj); let newData; //Newly created service data for the main table let stageNum = 0; //Different stages of progress, used to add up subsequent service progress; @@ -584,9 +588,11 @@ export class ServicesListComponent implements OnInit { e2eCloseCreate(obj){ if(!obj){ this.createshow2 = false; // + this.listDisplay = false; return false; } this.createshow2 = false; // + this.listDisplay = false; console.log(obj); let newData; // let createParams = "?customerId="+this.customerSelected.id + @@ -638,9 +644,11 @@ export class ServicesListComponent implements OnInit { nsCloseCreate(obj){ if(!obj){ this.createshow2 = false; // + this.listDisplay = false; return false; } this.createshow2 = false; // + this.listDisplay = false; console.log(obj); let newData; // // step1 |