diff options
Diffstat (limited to 'usecaseui-portal')
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.html | 214 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.less | 75 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.ts | 207 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/app.component.html | 2 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.html | 2 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/myhttp.service.ts | 6 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html | 469 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less | 53 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/services/services-list/services-list.component.html | 486 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/services/services-list/services-list.component.less | 102 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/services/services-list/services-list.component.ts | 54 | ||||
| -rw-r--r-- | usecaseui-portal/src/assets/images/create-box.png | bin | 0 -> 61405 bytes | |||
| -rw-r--r-- | usecaseui-portal/src/styles.less | 290 |
13 files changed, 1293 insertions, 667 deletions
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html index 894cdf5b..6e345a4e 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.html +++ b/usecaseui-portal/src/app/alarm/alarm.component.html @@ -13,105 +13,121 @@ See the License for the specific language governing permissions and limitations under the License. --> -<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;">Alarm</span> <span *ngIf="detailshow">> - Details</span> </h3> -<hr> -<div class="select" [@showHideAnimate]="state"> -<div class="query_criteria"> - <span>Source Name: </span> - <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> - <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button> - <ul nz-menu> - <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList"> - <a>{{item}}</a> - </li> - </ul> - </nz-dropdown> - - <span>Priority: </span> - <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> - <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button> - <ul nz-menu> - <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList"> - <a>{{item}}</a> - </li> - </ul> - </nz-dropdown> - - <span>Status: </span> - <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> - <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button> - <ul nz-menu> - <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList"> - <a>{{item}}</a> - </li> - </ul> - </nz-dropdown> - <br> <br> - <span>Report Time: </span> - <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker> +<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;" *ngIf="detailshow">Alarm</span> <span *ngIf="detailshow">> + Details</span> </h3> +<div style="padding:0px 20px 20px 20px;"> + <div class="charts" [@showHideAnimate]="state"> + <div class="chartsleft"> + <div class="active sctive_closed"> + <div>Active</div> + <div>13,980</div> + <div><nz-progress [nzPercent]="90" [nzShowInfo]="false"></nz-progress></div> + <div>There are 13980 faults waiting to be solved</div> + </div> + <div class="closed sctive_closed"> + <div>Closed</div> + <div>23,980</div> + <div><nz-progress [nzPercent]="30" [nzShowInfo]="false"></nz-progress></div> + <div>23,980 faults have been fixed</div> + </div> + </div> + <div class="chartsright"> + <span>Daily Total</span> + <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + </div> + </div> + <div class="select" [@showHideAnimate]="state"> + <div class="query_criteria"> + <span>Source Name: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + + <span>Priority: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + + <span>Status: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + + <span>Report Time: </span> + <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker> - <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button> -</div> -</div> -<div class="content" [@showHideAnimate]="state"> -<div class="title"> - <ul> - <li> - <h5>All</h5> - <p>{{alarmList.all }}</p> - </li> - <li> - <h5>Closed</h5> - <p>{{alarmList.closed }}</p> - </li> - <li> - <h5>Active</h5> - <p>{{alarmList.activeNum }}</p> - </li> - </ul> -</div> -<div class="chart"> - <h3>Alarm Chart</h3> - <nz-radio-group [(ngModel)]="size"> - <label nz-radio-button nzValue="day" (click)="day()"> day </label> - <label nz-radio-button nzValue="month" (click)="month()">month</label> - </nz-radio-group> - <div class="AlarmChart" [ngClass]="{'alarmChart-active':alarmShow}"> - <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button> + </div> + </div> + <div class="content" [@showHideAnimate]="state"> + <!-- <div class="title"> + <ul> + <li> + <h5>All</h5> + <p>{{alarmList.all }}</p> + </li> + <li> + <h5>Closed</h5> + <p>{{alarmList.closed }}</p> + </li> + <li> + <h5>Active</h5> + <p>{{alarmList.activeNum }}</p> + </li> + </ul> + </div> --> + <!-- <div class="chart"> + <h3>Alarm Chart</h3> + <div class="AlarmChart" [ngClass]="{'alarmChart-active':alarmShow}"> + <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + </div> + </div> --> + <div class="tablelist"> + <nz-table #nzTable [nzData]="list" [(nzPageSize)]="pageSize" nzShowSizeChanger nzShowQuickJumper + [nzPageSizeOptions]="[5,10,15,20]" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="5%" style="padding-left:20px;">NO</th> + <th nzWidth="12%">Source Name</th> + <th nzWidth="7%">Priority</th> + <th nzWidth="18%">SpecificProblem</th> + <th nzWidth="15%">Report Time</th> + <th nzWidth="15%">Clear Time</th> + <th nzWidth="8%">Status</th> + <th nzWidth="10%">Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index;"> + <td style="padding-left: 20px;">{{i+1}}</td> + <td>{{item.sourceName}}</td> + <td>{{item.priority}}</td> + <td>{{item.specificProblem}}</td> + <td>{{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}}</td> + <td>{{item.startEpochMicrosecCleared | date:'yyyy-MM-dd HH:mm:ss'}}</td> + <td>{{item.status}}</td> + <td class="action"><a (click)="detailShow(item)"><i class="details"></i></a></td> + </tr> + </tbody> + </nz-table> + </div> + </div> + <div [@showHideAnimate]="state2"> + <app-details [detailId]="detailId"></app-details> </div> - <button class="open-close" [ngClass]="{'open-close-active':alarmShow}" (click)="alarmShow=!alarmShow"></button> -</div> -<div class="tablelist"> - <nz-table #nzTable [nzData]="list" [(nzPageSize)]="pageSize" nzShowSizeChanger nzShowQuickJumper [nzPageSizeOptions]="[5,10,15,20]" - nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="5%">NO</th> - <th nzWidth="10%">Source Name</th> - <th nzWidth="10%">Priority</th> - <th nzWidth="15%">SpecificProblem</th> - <th nzWidth="15%">Report Time</th> - <th nzWidth="15%">Clear Time</th> - <th nzWidth="10%">Status</th> - <th nzWidth="10%">Action</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index;"> - <td>{{i+1}}</td> - <td>{{item.sourceName}}</td> - <td>{{item.priority}}</td> - <td>{{item.specificProblem}}</td> - <td>{{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}}</td> - <td>{{item.startEpochMicrosecCleared | date:'yyyy-MM-dd HH:mm:ss'}}</td> - <td>{{item.status}}</td> - <td class="action"><a (click)="detailShow(item)"><i class="details"></i></a></td> - </tr> - </tbody> - </nz-table> -</div> -</div> -<div [@showHideAnimate]="state2"> -<app-details [detailId]="detailId"></app-details> </div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less index 649815c5..936f73c8 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.less +++ b/usecaseui-portal/src/app/alarm/alarm.component.less @@ -25,7 +25,7 @@ hr { margin-bottom: 20px; } .select { - margin-bottom: 20px; + margin-bottom: 15px; span { display: inline-block; font: 700 14px "Arial"; @@ -68,6 +68,54 @@ hr { } } +.charts{ + width: 100%; + height: 250px; + margin-bottom: 25px; + .chartsleft { + width: 30%; + height: 100%; + float: left; + margin-right: 2%; + color: #fff; + font-family:"ArialMT"; + .sctive_closed { + height: 48.75%; + padding: 12px; + width: 100%; + :first-child{ + font-size: 14px; + } + :nth-child(2) { + font-size: 18px; + } + :nth-child(3) { + font-size: 12px; + } + } + .active { + margin-bottom: 5px; + background: -webkit-linear-gradient(left, #FB7788 , #FB93C2); /* Safari 5.1 - 6.0 */ + background: -o-linear-gradient(right, #FB7788, #FB93C2); /* Opera 11.1 - 12.0 */ + background: -moz-linear-gradient(right, #FB7788, #FB93C2); /* Firefox 3.6 - 15 */ + background: linear-gradient(to right, #FB7788 , #FB93C2); /* 标准的语法（必须放在最后） */ + } + .closed { + margin-top: 2px; + background: -webkit-linear-gradient(left, #7A8BAE , #A6BFE4); /* Safari 5.1 - 6.0 */ + background: -o-linear-gradient(right, #7A8BAE , #A6BFE4); /* Opera 11.1 - 12.0 */ + background: -moz-linear-gradient(right, #7A8BAE , #A6BFE4); /* Firefox 3.6 - 15 */ + background: linear-gradient(to right, #7A8BAE , #A6BFE4); /* 标准的语法（必须放在最后） */ + } + + } + .chartsright { + background-color: #fff; + width: 68%; + float: left; + height: 100%; + } +} .content { .title { border-radius: 5px 5px 0 0; @@ -148,8 +196,8 @@ hr { } } .tablelist { - background-color: #fff; - padding: 24px 10px 0px; + // background-color: #fff; + // padding: 24px 10px 0px; border-radius: 0 0 5px 5px; .action{ padding: 10px 0 0 20px; @@ -165,3 +213,24 @@ hr { } } } +// select 框更改 +.select[_ngcontent-c3] nz-dropdown[_ngcontent-c3] button[_ngcontent-c3] { + width: 120px; + height: 30px; + background-color: #fff; + text-align: left; + border-color: #EEEEEE; + border-radius: 2px; +} +.select[_ngcontent-c3] nz-dropdown[_ngcontent-c3] [_ngcontent-c3]:hover { + border-color: #58B7F9; +} +.ant-progress-inner{ + background:rgba(229,238,252,0.8) !important; +} +.ant-progress-bg { + background-color: linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(223,233,243,1) 100%) !important; +} + + + diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts index be8aae01..ae9c0681 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.ts +++ b/usecaseui-portal/src/app/alarm/alarm.component.ts @@ -16,7 +16,7 @@ import { Component, OnInit, Input, Output, EventEmitter, HostBinding, Pipe, PipeTransform } from '@angular/core'; import { HomesService } from '../homes.service'; import { showHideAnimate, slideToRight } from '../animates'; -import { DatePipe } from "@angular/common" +import { DatePipe } from '@angular/common'; @Component({ selector: 'app-alarm', templateUrl: './alarm.component.html', @@ -45,7 +45,7 @@ export class AlarmComponent implements OnInit { ngOnInit() { this.getAlarmFormData(); this.getSourceNames(); - this.getstatuscount(); + // this.getstatuscount(); } // Filter box @@ -106,14 +106,14 @@ export class AlarmComponent implements OnInit { activeNum: 0 } // total data - getstatuscount() { - this.myhttp.getstatuscount().subscribe((data) => { - this.alarmList.activeNum = data[0]; - this.alarmList.closed = data[1]; - this.alarmList.all = (data[0] - 0) + (data[1] - 0); + // getstatuscount() { + // this.myhttp.getstatuscount().subscribe((data) => { + // this.alarmList.activeNum = data[0]; + // this.alarmList.closed = data[1]; + // this.alarmList.all = (data[0] - 0) + (data[1] - 0); - }) - } + // }) + // } getAlarmFormData() { this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.sourceName, this.priority, this.startTime, this.endTime, this.vfStatus).subscribe((data) => { this.list = data.alarms; @@ -122,10 +122,10 @@ export class AlarmComponent implements OnInit { } getAlarmChartData(event) { let paramsObj = { - sourceName: this.sourceName, - startTime: this.startTime, - endTime: this.endTime, - format: 'day' + // sourceName: this.sourceName, + // startTime: this.startTime, + // endTime: this.endTime, + // format: 'day' } this.myhttp.getHomeAlarmChartData(paramsObj) .subscribe((data) => { @@ -136,7 +136,6 @@ export class AlarmComponent implements OnInit { series: [ { data: data.allList }, { data: data.ActiveList }, - { data: data.closedList } ] } }, (err) => { @@ -144,61 +143,61 @@ export class AlarmComponent implements OnInit { }) } // day alarmchartdata - day() { - let paramsObj = { - sourceName: this.sourceName, - startTime: this.startTime, - endTime: this.endTime, - format: "day" - } - this.myhttp.getHomeAlarmChartData(paramsObj) - .subscribe((data) => { - this.alarmChartData = { - xAxis: { - data: data.dateList - }, - series: [ - { data: data.allList }, - { data: data.ActiveList }, - { data: data.closedList } - ] - } - }, (err) => { - console.log(err); - }) - } - month() { - let paramsObj = { - sourceName: this.sourceName, - startTime: this.startTime, - endTime: this.endTime, - format: "month" - } - this.myhttp.getHomeAlarmChartData(paramsObj) - .subscribe((data) => { - this.alarmChartData = { - xAxis: { - data: data.dateList - }, - series: [ - { data: data.allList }, - { data: data.ActiveList }, - { data: data.closedList } - ] - } - }, (err) => { - console.log(err); - }) - } + // day() { + // let paramsObj = { + // sourceName: this.sourceName, + // startTime: this.startTime, + // endTime: this.endTime, + // format: "day" + // } + // this.myhttp.getHomeAlarmChartData(paramsObj) + // .subscribe((data) => { + // this.alarmChartData = { + // xAxis: { + // data: data.dateList + // }, + // series: [ + // { data: data.allList }, + // { data: data.ActiveList }, + // { data: data.closedList } + // ] + // } + // }, (err) => { + // console.log(err); + // }) + // } + // month() { + // let paramsObj = { + // sourceName: this.sourceName, + // startTime: this.startTime, + // endTime: this.endTime, + // format: "month" + // } + // this.myhttp.getHomeAlarmChartData(paramsObj) + // .subscribe((data) => { + // this.alarmChartData = { + // xAxis: { + // data: data.dateList + // }, + // series: [ + // { data: data.allList }, + // { data: data.ActiveList }, + // { data: data.closedList } + // ] + // } + // }, (err) => { + // console.log(err); + // }) + // } //Line chart alarmShow = false; alarmChartData: Object; alarmChartInit: Object = { - height: 380, + height: 240, option: { legend: { bottom: '0px', - data: ['All', 'Active', 'Closed'] + data: ['Active', 'Fixed'] }, tooltip: { trigger: 'axis', @@ -217,59 +216,55 @@ export class AlarmComponent implements OnInit { }, series: [ { - name: 'All', - type: 'line', - smooth: true, - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_one + name: 'Active', + type: 'bar', data: [], + barWidth: 10, + barGap: 1, itemStyle: { - color: "#526b75" - }, - lineStyle: { - width: 1, - opacity: 0.5 + normal: { + barBorderRadius: [5], + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB7788' // 0% 处的颜色 + }, { + offset: 1, color: '#FB93C2' // 100% 处的颜色 + }], + }, + opacity: 1, + } } }, { - name: 'Active', - type: 'line', - smooth: true,// - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_two + name: 'Fixed', + type: 'bar', data: [], + barWidth: 10, + barGap: 1, itemStyle: { - color: "#fb6e6e" - }, - lineStyle: { - width: 1, - opacity: 0.5 + normal: { + barBorderRadius: [5], + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#7A8BAE' // 0% 处的颜色 + }, { + offset: 1, color: '#A6BFE4' // 100% 处的颜色 + }], + }, + opacity: 1, + } } }, - { - name: 'Closed', - type: 'line', - smooth: true,// - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_two - data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 125], - itemStyle: { - color: "#3fa8eb" - }, - lineStyle: { - width: 1, - opacity: 0.5 - } - } ] } }; diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html index df0890e6..1990d708 100644 --- a/usecaseui-portal/src/app/app.component.html +++ b/usecaseui-portal/src/app/app.component.html @@ -69,7 +69,7 @@ </ul> </nz-dropdown> </nz-sider> - <nz-layout style="margin-left: 260px; padding: 20px 32px; height:100vh; position:relative;"> + <nz-layout style="margin-left: 260px; height:100vh; position:relative;"> <router-outlet></router-outlet> </nz-layout> </nz-layout> diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html index 191c67ac..577a6356 100644 --- a/usecaseui-portal/src/app/home/home.component.html +++ b/usecaseui-portal/src/app/home/home.component.html @@ -16,7 +16,7 @@ <!--<h3 class="title"> {{"Overall trend" | translate}}</h3> <hr> --> -<div class="content"> +<div class="content" style="padding: 20px 20px;"> <div class="services"> <h4>{{"SERVICES" | translate}}</h4> <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3> diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts index ee6ffaca..753c05f6 100644 --- a/usecaseui-portal/src/app/myhttp.service.ts +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -174,11 +174,11 @@ export class MyhttpService { // Query progress interface getProgress(obj) { - let url = this.url.progress.replace("*_*", obj.serviceId) + obj.operationId; + let url = this.url.progress.replace("*_*", obj.serviceId) + obj.operationId + "?operationType="+obj.operationType; return this.http.get<any>(url); } - getNsProgress(jobid,serviceId){ - let url = this.url.nsProgress.replace("*_*",jobid) + serviceId; + getNsProgress(jobid,serviceId,operationType){ + let url = this.url.nsProgress.replace("*_*",jobid) + serviceId + "&operationType="+operationType; return this.http.get<any>(url); } diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html index c90920c3..605c455f 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -14,197 +14,342 @@ limitations under the License. --> <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'"> - <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"> - <!-- nsList --> - <div class="list" *ngIf="tab === 'NS'"> - <h3 class="title"> Onboard {{tabTitle}} </h3> + <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"> + <!-- nsList --> + <div class="list" *ngIf="tab === 'NS'"> + <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS"> <p class="ant-upload-drag-icon"> <i nz-icon type="inbox" class="anticon anticon-inbox"></i> </p> - <p class="ant-upload-text">Click or drag file to this area to upload</p> + <p class="ant-upload-text">Click or drag CSAR File here</p> <p class="ant-upload-hint"></p> </nz-upload> <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" - style="margin-top: 16px"> + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"> {{ nsuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-spin [nzSpinning]="isSpinning"> - <div class="mask" *ngIf="isSpinning"></div> - <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex' - [nzLoading]="loading" nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="15%">Operational State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td *ngIf="item.id">{{item.id}}</td> - <td *ngIf="item.uuid">{{item.uuid}}</td> - - <td *ngIf="item.nsdName">{{item.nsdName}}</td> - <td *ngIf="item.nsdName === null || item.nsdName === ''"> </td> - <td *ngIf="item.name">{{item.name}}</td> - <td *ngIf="item.name===null || item.name=== ''"> </td> - <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> - <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''"> </td> - <td *ngIf="item.version">{{item.version}}</td> - <td *ngIf="item.version === null || item.version === ''"> </td> - <td> - <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> - <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''"> </span> - <span *ngIf="item.uuid">{{status}}</span> - - <!-- <span *ngIf="item.uuid" [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', - 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span> - <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> --> - </td> - <td>{{item.nsdOperationalState}}</td> - <td>{{item.nsdUsageState}}</td> - <td> - <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" - class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i)" *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> - - <span *ngIf="item.id && item.sameid == undefined"> - <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> - </nz-upload> - <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" style="margin-top: 16px" *ngIf="item.id==nsdInfoId"> - {{ nsuploading ? 'Uploading' : 'Start Upload' }} - </button> - </span> - - </td> - </tr> - </tbody> - </nz-table> - </nz-spin> </div> - <!-- VNFList --> - <div class="list" *ngIf="tab === 'VNF'"> - <h3 class="title"> Onboard {{tabTitle}} </h3> + <div class="listlin"></div> + <div class="listfile"> + <div> + <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div> + <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div class="color"> + <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div>File upload completed</div> + <div>456</div> + </div> + </div> + + </div> + <nz-spin [nzSpinning]="isSpinning"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" + [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" + [(nzPageIndex)]='nspageIndex' [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="15%">Operational State</th> + <th nzWidth="10%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td *ngIf="item.id">{{item.id}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> + + <td *ngIf="item.nsdName">{{item.nsdName}}</td> + <td *ngIf="item.nsdName === null || item.nsdName === ''"> </td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.name===null || item.name=== ''"> </td> + <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> + <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''"> </td> + <td *ngIf="item.version">{{item.version}}</td> + <td *ngIf="item.version === null || item.version === ''"> </td> + <td> + <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''"> </span> + <span *ngIf="item.uuid">{{status}}</span> + + <!-- <span *ngIf="item.uuid" [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', + 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span> + <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> --> + </td> + <td>{{item.nsdOperationalState}}</td> + <td>{{item.nsdUsageState}}</td> + <td> + <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i)" + *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" + *ngIf="item.id"></i> + <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">--> + <span *ngIf="item.id && item.sameid == undefined"> + <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> + <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> + </nz-upload> + <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" + style="margin-top: 16px" *ngIf="item.id==nsdInfoId"> + {{ nsuploading ? 'Uploading' : 'Start Upload' }} + </button> + </span> + + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + <!-- <div style="margin-top:8px;"> + Loading state + <nz-switch [(ngModel)]="isSpinning"></nz-switch> + </div> --> + + </div> + <!-- VNFList --> + <div class="list" *ngIf="tab === 'VNF'"> + <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF"> <p class="ant-upload-drag-icon"> <i nz-icon type="inbox" class="anticon anticon-inbox"></i> </p> - <p class="ant-upload-text">Click or drag file to this area to upload</p> + <p class="ant-upload-text">Click or drag CSAR File here</p> <p class="ant-upload-hint"></p> </nz-upload> <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" - style="margin-top: 16px"> + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"> {{ vnfuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-spin [nzSpinning]="isSpinning"> - <div class="mask" *ngIf="isSpinning"></div> - <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" [(nzPageIndex)]='vnfpageIndex' - [nzLoading]="loading" nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="15%">Operational State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td *ngIf="item.id">{{item.id}}</td> - <td *ngIf="item.uuid">{{item.uuid}}</td> - <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> - <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''"> </td> - <td *ngIf="item.name">{{item.name}}</td> - <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> - <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''"> </td> - <td *ngIf="item.version">{{item.version}}</td> - <td>{{item.onboardingState}}</td> - <td>{{item.usageState}}</td> - <td>{{item.operationalState}}</td> - <td> - <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" - class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> - <span *ngIf="item.id && item.sameid == undefined"> - <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> - </nz-upload> - <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" style="margin-top: 16px" *ngIf="item.id==vnfPkgId"> - {{ nsuploading ? 'Uploading' : 'Start Upload' }} - </button> - </span> - </td> - </tr> - </tbody> - </nz-table> - </nz-spin> - </div> - <!-- PNFList --> - <div class="list" *ngIf="tab === 'PNF'"> - <h3 class="title"> Onboard {{tabTitle}} </h3> + <div class="listlin"></div> + <div class="listfile"> + <div> + <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div> + <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div class="color"> + <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div>File upload completed</div> + <div>456</div> + </div> + </div> + </div> + <nz-spin [nzSpinning]="isSpinning"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" + [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" + [(nzPageIndex)]='vnfpageIndex' [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="15%">Operational State</th> + <th nzWidth="10%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td *ngIf="item.id">{{item.id}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> + <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> + <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''"> </td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> + <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''"> </td> + <td *ngIf="item.version">{{item.version}}</td> + <td>{{item.onboardingState}}</td> + <td>{{item.usageState}}</td> + <td>{{item.operationalState}}</td> + <td> + <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" + *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" + *ngIf="item.id"></i> + <span *ngIf="item.id && item.sameid == undefined"> + <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> + <!-- <button nz-button> --> + <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> + <!-- <span >upload</span> --> + <!-- </button> --> + + </nz-upload> + <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;" + *ngIf="item.id==vnfPkgId"> + {{ nsuploading ? 'Uploading' : 'Start Upload' }} + </button> + </span> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + + </div> + <!-- PNFList --> + <div class="list" *ngIf="tab === 'PNF'"> + <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF"> <p class="ant-upload-drag-icon"> <i nz-icon type="inbox" class="anticon anticon-inbox"></i> </p> - <p class="ant-upload-text">Click or drag file to this area to upload</p> + <p class="ant-upload-text">Click or drag CSAR File here</p> <p class="ant-upload-hint"></p> </nz-upload> <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" - style="margin-top: 16px"> + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"> {{ pnfuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-spin [nzSpinning]="isSpinning"> - <div class="mask" *ngIf="isSpinning"></div> - <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex' - [nzLoading]="loading" nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td>{{item.id}}</td> - <td>{{item.pnfdName}}</td> - <td>{{item.pnfdVersion}}</td> - <td>{{item.pnfdOnboardingState}}</td> - <td>{{item.pnfdUsageState}}</td> - <td> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> - <span *ngIf="item.id"> - <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> - </nz-upload> - <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" style="margin-top: 16px" *ngIf="item.id==vnfPkgId"> - {{ nsuploading ? 'Uploading' : 'Start Upload' }} - </button> - </span> - </td> - </tr> - </tbody> - </nz-table> - </nz-spin> - </div> - </nz-tab> + <div class="listlin"></div> + <div class="listfile"> + <div> + <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div> + <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div class="color"> + <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div>File upload completed</div> + <div>456</div> + </div> + </div> + </div> + <nz-spin [nzSpinning]="isSpinning"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" + [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" + [(nzPageIndex)]='pnfpageIndex' [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="10%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{item.id}}</td> + <td>{{item.pnfdName}}</td> + <td>{{item.pnfdVersion}}</td> + <td>{{item.pnfdOnboardingState}}</td> + <td>{{item.pnfdUsageState}}</td> + <td> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> + <span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}"> + <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> + <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> + </nz-upload> + <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;" + *ngIf="item.id==vnfPkgId"> + {{ nsuploading ? 'Uploading' : 'Start Upload' }} + </button> + </span> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + + </div> + </nz-tab> </nz-tabset> diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less index aca14585..b4d92fde 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -42,9 +42,58 @@ hr { } .list { - background-color: #fff; + // background-color: #fff; border-radius: 5px; - padding: 10px; + // padding: 10px; + .listupload { + width: 22%; + float: left; + margin-left: 13%; + } + .listlin { + float: left; + width: 1%; + margin-left: 10%; + height: 177px; + margin-bottom: 30px; + border-right: 2px solid #EEEEEE; + } + .listfile { + float: left; + width: 44%; + margin-left: 10%; + .listfilebgc { + background-color: #fff; + border-bottom: 8px solid #F7F8FC; + } + .listfilebgc { + background-color: #fff; + height: 30px; + border-radius: 2px; + line-height: 2; + color: #42548F; + border-bottom: 4px solid #F7F8FC; + >div { + float: left; + } + :first-child { + width: 6%; + } + :nth-child(2){ + width:20%; + } + :nth-child(3){ + width: 60%; + text-align: center; + } + :nth-child(4){ + padding-left: 4%; + } + .color { + color:rgba(66,84,143,0.5); + } + } + } nz-table { tbody { td { 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 76950c32..28162251 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 @@ -13,236 +13,276 @@ See the License for the specific language governing permissions and limitations under the License. --> -<h3 class="title"> Services List </h3> -<hr> -<div class="action"> - <span>Customer: </span> - <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> - <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i></button> - <ul nz-menu style="max-height: 200px; overflow: auto;"> - <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList"> - <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a> - </li> - </ul> - </nz-dropdown> - - - <span>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> - <ul nz-menu style="max-height: 200px; overflow: auto;"> - <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList"> - <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a> - </li> - </ul> - </nz-dropdown> +<div class="action ant-tabs-bar"> + <span>Customer: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i> + </button> + <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;"> + <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList"> + <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a> + </li> + </ul> + </nz-dropdown> - <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button> - <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"> - <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> + + <span>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> + <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;"> + <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList"> + <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a> + </li> + </ul> + </nz-dropdown> - <hr> - <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> + <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i + class="anticon anticon-plus-circle-o"></i><span> Create </span></button> + <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="CREATE" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()"> + <div class="select-list"> + <span style="display:inline-block;width:70px;">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> + </nz-select> + </div> - <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 == '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;width:70px;"> 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> + <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'||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> - </nz-modal> + <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> + </nz-modal> </div> -<div class="list"> - <nz-table *ngIf="1" - #nzTable [nzData]="tableData" - nzShowSizeChanger - [nzFrontPagination]="false" - [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" - [nzTotal]= 'total' - [(nzPageSize)]="pageSize" - [(nzPageIndex)]='pageIndex' - [nzLoading]="loading" - [nzSize]="'middle'" - [nzScroll]="{ y: '58vh' }" - (nzPageIndexChange)="searchData()" - (nzPageSizeChange)="searchData(true)"> - <thead> - <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%">Type</th> - <th nzWidth="20%">Status</th> - <th nzWidth="15%">Action</th> - </tr> - </thead> - <tbody> - <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> - <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.serviceDomain}}</td> - <td> +<nz-layout style=" padding: 20px 32px; "> + <ul class="top-num"> + <li *ngFor="let item of serviceMunber" class="top-list"> + <span class="round">{{item.serviceDomain}}</span> + <div class="top-list-text"> + <span>{{item.number}}</span><br> + <span>{{item.serviceDomain}} Service Instances</span> + </div> + </li> + </ul> + <div class="list"> + <nz-table *ngIf="1" + #nzTable [nzData]="tableData" + nzShowSizeChanger + [nzFrontPagination]="false" + [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" + [nzTotal]='total' + [(nzPageSize)]="pageSize" + [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" + [nzSize]="'middle'" + [nzScroll]="{ y: '58vh' }" + (nzPageIndexChange)="searchData()" + (nzPageSizeChange)="searchData(true)"> + <thead> + <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%">Status</th> + <th nzWidth="15%">Action</th> + </tr> + </thead> + <tbody> + <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> + <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 [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN'}"> + {{data.serviceDomain}} + </td> + <td> <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> - </td> - <td> - <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" - *ngIf="data.serviceDomain=='E2E 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 [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> --> - <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" - *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i> - <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete" (click)="deleteModel(data)"></i> - </td> - </tr> - <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances"> - <td></td> - <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> - <span [ngClass]="{'healing':item.status=='Healing'}">{{item.status || "Available"}}</span> - <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress> - </td> - <td> - <i *ngIf="item.serviceDomain=='vnf'" [ngClass]="{'cannotclick':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> - </ng-template> - </tbody> - </nz-table> + <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"></nz-progress> + </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> + <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 *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> --> + </td> + </tr> + <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances"> + <td></td> + <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> + <span [ngClass]="{'healing':item.status=='Healing'}">{{item.status || "Available"}}</span> + <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')}" + class="anticon anticon-reload" (click)="healService(item)"></i> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> - <nz-modal [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"] || thisService["vnfInstanceId"]}}</b> - <div *ngFor="let item of e2e_nsData"> - <h3>{{ item.netWorkServiceName }}</h3><hr> - <span style="display:inline-block;width:50%;">Scale Type:</span> - <nz-select style="width: 165px;" [(ngModel)]="item.scaleType"> - <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option> - <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option> - </nz-select> - <span style="display:inline-block;width:50%;">AspectId:</span> - <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string"> - <span style="display:inline-block;width:50%;">Number Of Steps:</span> - <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100" nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number> - <span style="display:inline-block;width:50%;">Scaling Direction:</span> - <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection"> - <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option> - <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option> - </nz-select> - </div> - </nz-modal> - <nz-modal [(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> - Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] }}</b> - <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> - <span style="display:inline-block;width:50%;">terminationType:</span> - <nz-select style="width: 165px;" [(ngModel)]="terminationType" > - <nz-option nzValue="graceful" nzLabel="graceful"></nz-option> - <nz-option nzValue="forceful" nzLabel="forceful"></nz-option> - </nz-select> - <span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span> - <input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input [(ngModel)]="gracefulTerminationTimeout"> - </div> - </nz-modal> - <nz-modal [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"] || thisService["vnfInstanceId"]}}</b> - <!-- NS --> - <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> - <span style="display:inline-block;width:50%;">degreeHealing:</span> - <nz-select style="width: 165px;" [(ngModel)]="nsParams.degreeHealing" > - <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option> - <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option> - <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option> - <nz-option nzValue="PARTIAL_HEALING" nzLabel="PARTIAL_HEALING"></nz-option> - </nz-select> - <div> - <span style="display:inline-block;">actionsHealing:</span> - <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i class="anticon anticon-plus-circle-o"></i></button> - <br> - <div *ngFor="let item of healActions;let i = index;" style="display:inline-block;"> - <input style="width: 165px;" nz-input [(ngModel)]="item.value"><button nz-button [nzType]="'dashed'" (click)="minusActionsHealing(i)"><i class="anticon anticon-minus-circle-o"></i></button> - - </div> - </div> - <span style="display:inline-block;width:50%;">healScript:</span> - <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript"> - <div> - <span style="display:inline-block;">additionalParamsforNs:</span> - <button nz-button [nzType]="'default'" (click)="addNsAdditional()"><i class="anticon anticon-plus-circle-o"></i></button> - <br> - <div *ngFor="let item of nsAdditional;let i = index;"> - Key: <input style="width: 165px;" nz-input [(ngModel)]="item.key"> - Value: <input style="width: 165px;" nz-input [(ngModel)]="item.value"> - <button nz-button [nzType]="'dashed'" (click)="minusNsAdditional(i)"><i class="anticon anticon-minus-circle-o"></i></button> - </div> - </div> - </div> - <!-- vnf --> - <div *ngIf="thisService['serviceDomain'] == 'vnf'"> - <span style="display:inline-block;width:50%;">cause:</span> - <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.cause"> - <span style="display:inline-block;width:50%;">action:</span> - <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.additionalParams.action"> - <span style="display:inline-block;width:50%;">actionvminfo:</span> - <nz-select style="width: 165px;" [(ngModel)]="vmSelected" > - <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option> - </nz-select> - </div> - </nz-modal> -</div> + <nz-modal [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"] || + thisService["vnfInstanceId"]}}</b> + <div *ngFor="let item of e2e_nsData"> + <h3>{{ item.netWorkServiceName }}</h3> + <hr> + <span style="display:inline-block;width:50%;">Scale Type:</span> + <nz-select style="width: 165px;" [(ngModel)]="item.scaleType"> + <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option> + <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option> + </nz-select> + <span style="display:inline-block;width:50%;">AspectId:</span> + <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string"> + <span style="display:inline-block;width:50%;">Number Of Steps:</span> + <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100" + nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number> + <span style="display:inline-block;width:50%;">Scaling Direction:</span> + <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection"> + <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option> + <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option> + </nz-select> + </div> + </nz-modal> + <nz-modal [(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> + Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] || + thisService["nsInstanceId"] }}</b> + <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> + <span style="display:inline-block;width:50%;">terminationType:</span> + <nz-select style="width: 165px;" [(ngModel)]="terminationType"> + <nz-option nzValue="graceful" nzLabel="graceful"></nz-option> + <nz-option nzValue="forceful" nzLabel="forceful"></nz-option> + </nz-select> + <span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span> + <input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input + [(ngModel)]="gracefulTerminationTimeout"> + </div> + </nz-modal> + <nz-modal [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"] || + thisService["vnfInstanceId"]}}</b> + <!-- NS --> + <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> + <span style="display:inline-block;width:50%;">degreeHealing:</span> + <nz-select style="width: 165px;" [(ngModel)]="nsParams.degreeHealing"> + <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option> + <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option> + <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option> + <nz-option nzValue="PARTIAL_HEALING" nzLabel="PARTIAL_HEALING"></nz-option> + </nz-select> + <div> + <span style="display:inline-block;">actionsHealing:</span> + <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i + class="anticon anticon-plus-circle-o"></i></button> + <br> + <div *ngFor="let item of healActions;let i = index;" style="display:inline-block;"> + <input style="width: 165px;" nz-input [(ngModel)]="item.value"> + <button nz-button [nzType]="'dashed'" (click)="minusActionsHealing(i)"><i + class="anticon anticon-minus-circle-o"></i></button> + + </div> + </div> + <span style="display:inline-block;width:50%;">healScript:</span> + <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript"> + <div> + <span style="display:inline-block;">additionalParamsforNs:</span> + <button nz-button [nzType]="'default'" (click)="addNsAdditional()"><i + class="anticon anticon-plus-circle-o"></i></button> + <br> + <div *ngFor="let item of nsAdditional;let i = index;"> + Key: <input style="width: 165px;" nz-input [(ngModel)]="item.key"> + Value: <input style="width: 165px;" nz-input [(ngModel)]="item.value"> + <button nz-button [nzType]="'dashed'" (click)="minusNsAdditional(i)"><i + class="anticon anticon-minus-circle-o"></i></button> + </div> + </div> + </div> + <!-- vnf --> + <div *ngIf="thisService['serviceDomain'] == 'vnf'"> + <span style="display:inline-block;width:50%;">cause:</span> + <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.cause"> + <span style="display:inline-block;width:50%;">action:</span> + <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.additionalParams.action"> + <span style="display:inline-block;width:50%;">actionvminfo:</span> + <nz-select style="width: 165px;" [(ngModel)]="vmSelected"> + <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option> + </nz-select> + </div> + </nz-modal> + </div> -<div class="detailComponent" *ngIf="detailshow"> - <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData" (closeDetail)="detailshow = false;"></app-ccvpn-detail> -</div> -<div class="createComponent" *ngIf="createshow"> - <app-ccvpn-creation - [createParams]="createData" - [namesTranslate]="namesTranslate" - (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> + <div class="detailComponent" *ngIf="detailshow"> + <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData" + (closeDetail)="detailshow = false;"></app-ccvpn-detail> + </div> + <div class="createComponent" *ngIf="createshow"> + <app-ccvpn-creation + [createParams]="createData" + [namesTranslate]="namesTranslate" + (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> + <!--</div>--> +</nz-layout>
\ No newline at end of file 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 40c00231..3ef3fde2 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 @@ -25,25 +25,31 @@ hr { margin-bottom: 20px; } .action { - margin-bottom: 20px; + margin-bottom: 15px; + padding: 28px; + background: #ffffff; + position: relative; span { display: inline-block; font: 700 14px "Arial"; - color: #4c5e70; + color: #3C4F8C; + margin-right: 5px; } nz-dropdown { vertical-align: middle; + background-color:#ffffff; :hover{ - border-color: #147dc2; + border-color: #48C6EF; } button { width: 165px; - height: 30px; - background-color: #eceff4; + height: 42px; + background-color:#ffffff; text-align: left; - border-color: #9fa9ab; + border-color: #EEEEEE; span { font-weight: 400; + color: #3C4F8C; display: inline-block; width: 120px; overflow: hidden; @@ -56,17 +62,69 @@ hr { right: 10px; } } - //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 } + // //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 .create { - float: right; - height: 30px; - padding: 0 10px; + position: absolute; + right: 3%; + top:50%; + width:116px; + height:42px; + background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%); + border-radius:2px; + margin-top: -15px; span { color: #fff; font-weight: 400; + font-size: 18px; + } + .anticon-plus-circle-o{ + font-size: 18px; } } + .create.ant-btn.ant-btn-primary{ + border: none; + } + +} +.top-num{ + overflow: auto; +} +.top-list{ + position: relative; + width:360px; + height:160px; + margin: 15px 15px 30px 15px; + 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); + border-radius:2px; +} +.top-list .round{ + position: absolute; + width:80px; + height:80px; + line-height: 80px; + text-align: center; + top:50%; + left: 10px; + margin-top: -40px; + background:#E0EDFF; + border:2px solid rgba(224,237,255,1); + border-radius: 50%; + font-size:18px; + font-family:ArialMT; + color:#3C4F8C; +} +.top-list .top-list-text{ + position: absolute; + text-align: right; + height: 40px; + line-height: 20px; + top:50%; + margin-top: -20px; + right: 20px; + color: #fff; } .list { background-color: #fff; @@ -154,3 +212,27 @@ hr { padding: 20px 32px; z-index: 3; } +/*2019.01.14*/ +.e2eColor{ + color: #5B45E7; +} +.nsColor{ + color: #F96D7D; +} +.ccvpnColor{ + color: #3E86EC; +} +.sotnColor{ + color: #FFB629; +} +.select-list{ + width: 280px; + height: 32px; + line-height: 32px; + margin: 25px auto; +} +.select-list>span{ + text-align: left; + 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 f8921dab..7149ae2f 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 @@ -40,6 +40,24 @@ export class ServicesListComponent implements OnInit { serviceTypeSelected = {name:null}; listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters')); language="en"; + serviceMunber = [ + { + "serviceDomain": "E2E", + "number": 10 + }, + { + "serviceDomain": "NS", + "number": 20 + }, + { + "serviceDomain": "SOTN", + "number": 30 + }, + { + "serviceDomain": "CCVPN", + "number": 40 + } + ]; getallCustomers(){ console.log(this.listSortMasters); @@ -235,7 +253,8 @@ export class ServicesListComponent implements OnInit { } let id = item["nsInstanceId"] || item["service-instance-id"]; let jobid = item["jobId"] || item["operationId"]; - this.queryNsProgress(jobid,id,updata).then(()=>{ + let operationType = item["operationType"]; + this.queryNsProgress(jobid,id,updata,operationType).then(()=>{ item["rate"] = 100; item["status"] = "Successful"; item["tips"] = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==item["operationType"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+item["status"]; @@ -251,7 +270,8 @@ export class ServicesListComponent implements OnInit { } let obj = { serviceId:item["service-instance-id"], - operationId:item["operationId"] + operationId:item["operationId"], + operationType:item["operationType"] } this.queryProgress(obj,updata).then(()=>{ item["rate"] = 100; @@ -474,7 +494,7 @@ export class ServicesListComponent implements OnInit { newData.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"]; } } - let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"],operationType:"1001"}; return this.queryProgress(queryParams,updata); }).then((data)=>{ console.log(data); @@ -500,7 +520,7 @@ export class ServicesListComponent implements OnInit { newData.tips =this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"]; } } - let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"],operationType:"1001"}; querypros.push(this.queryProgress(queryParams,updata)) }) }) @@ -536,7 +556,7 @@ export class ServicesListComponent implements OnInit { newData.tips =this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"]; } } - let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"], operationType:"1001"}; querypros.push(this.queryProgress(queryParams,updata)) }) }) @@ -572,7 +592,9 @@ export class ServicesListComponent implements OnInit { let createParams = "?customerId="+this.customerSelected.id + "&serviceType="+this.serviceTypeSelected.name + "&serviceDomain="+this.templateTypeSelected + - "&parentServiceInstanceId="; + "&parentServiceInstanceId="+ + "&uuid="+obj.service.serviceUuid+ + "&invariantUuuid="+obj.service.serviceInvariantUuid; this.createService(obj,createParams).then((data)=>{ console.log(data); newData = { // @@ -594,7 +616,7 @@ export class ServicesListComponent implements OnInit { newData.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"]; } } - let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"],operationType:"1001"}; return this.queryProgress(queryParams,updata); }).then((data)=>{ console.log(data); @@ -651,6 +673,7 @@ export class ServicesListComponent implements OnInit { newData.status = "failed"; return false; } + let operationType="1001"; let updata = (prodata)=>{ newData.rate = prodata.progress; newData.tips = newData["status"]+newData.rate+"%"; @@ -660,7 +683,7 @@ export class ServicesListComponent implements OnInit { } } - return this.queryNsProgress(jobid,newData["service-instance-id"],updata); + return this.queryNsProgress(jobid,newData["service-instance-id"],updata,operationType); }).then((data)=>{ console.log(data); newData.rate = 100; @@ -721,7 +744,8 @@ export class ServicesListComponent implements OnInit { } let obj = { serviceId:id, - operationId:data.operationId + operationId:data.operationId, + operationType:"1003" } let updata = (prodata)=>{ service.rate = prodata.progress; @@ -753,6 +777,7 @@ export class ServicesListComponent implements OnInit { return false; } let jobid = data.jobId; + let operationType = "1004"; let updata = (prodata)=>{ service.rate = prodata.progress; if(service["rate"] > 100){ @@ -760,7 +785,7 @@ export class ServicesListComponent implements OnInit { service.tips = "Healing" + service["status"]; } } - this.queryNsProgress(jobid,null,updata).then((data1)=>{ + this.queryNsProgress(jobid,null,updata,operationType).then((data1)=>{ console.log(data1); service.rate = 100; service.status = "Successful"; @@ -792,7 +817,7 @@ export class ServicesListComponent implements OnInit { service.tips = "Deleting" + service["status"]; return false; } - let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId} + let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId,operationType:"1002"} let updata = (prodata)=>{ allprogress[prodata.operationId] = prodata.progress; let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)); @@ -831,6 +856,7 @@ export class ServicesListComponent implements OnInit { service.tips = "Deleting"; service.statusClass = "1002"; let id = service.nsInstanceId || service["service-instance-id"]; + let operationType ="1002"; let requestBody = { terminationType : this.terminationType, gracefulTerminationTimeout : this.gracefulTerminationTimeout @@ -848,7 +874,7 @@ export class ServicesListComponent implements OnInit { service.tips = "Deleting" + service["status"]; } } - return this.queryNsProgress(jobid,null,updata); + return this.queryNsProgress(jobid,null,updata,operationType); }).then(()=>{ this.myhttp.nsDeleteInstance(id) .subscribe((data)=>{ @@ -952,7 +978,7 @@ export class ServicesListComponent implements OnInit { }) return mypromise; } - queryNsProgress(jobid,id,callback){ + queryNsProgress(jobid,id,callback,operationType){ let mypromise = new Promise((res,rej)=>{ // let data = { // "jobId": "string", @@ -975,7 +1001,7 @@ export class ServicesListComponent implements OnInit { // } let errorNums = 180; let requery = ()=>{ - this.myhttp.getNsProgress(jobid,id) + this.myhttp.getNsProgress(jobid,id,operationType) .subscribe((data)=>{ if(data.status == "FAILED"){ callback({progress:255,status:"failed"}); diff --git a/usecaseui-portal/src/assets/images/create-box.png b/usecaseui-portal/src/assets/images/create-box.png Binary files differnew file mode 100644 index 00000000..5dc9ba35 --- /dev/null +++ b/usecaseui-portal/src/assets/images/create-box.png diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 5429a9c1..93e5251c 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -1,57 +1,97 @@ /* You can add global styles to this file, and also import other style files */ // 下拉框背景hover状态颜色 .ant-dropdown-menu { - .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover { - background-color: #3fa8eb; + .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover { + background-color: #3fa8eb; + a { + color: #fff; } + } } // 表格每页条数选项单位置 nz-table { - .ant-table-thead>tr>th { - color: #3fa8eb; //标题字体颜色 - } - .ant-spin-container { - nz-pagination { - ul { - .ant-pagination-options { - .ant-pagination-options-size-changer.ant-select{ - position: absolute; - left: 0; - } - } + .ant-table-thead > tr > th { + color: rgba(60, 79, 140, 0.5); //标题字体颜色 + background-color: #F7F8FC; + border-bottom: 0px solid #e8e8e8; + } + .ant-table-tbody > tr > td { + background-color: #fff; + border-bottom: 8px solid #F7F8FC; + } + .ant-spin-container { + nz-pagination { + ul { + .ant-pagination-options { + .ant-pagination-options-size-changer.ant-select { + width: 100px; + height: 40px; + line-height: 40px !important; + position: absolute; + left: 0; + color: #3C4F8C; + .ant-select-selection--single { + height: 40px; + line-height: 40px !important; + .ant-select-selection-selected-value { + height: 40px; + line-height: 40px !important; + } } + } + } + } + .ant-pagination.mini.ant-table-pagination { + .ant-pagination-prev, .ant-pagination-item, .ant-pagination-next { + width: 40px; + height: 40px; + line-height: 40px; + .ant-pagination-item-link, .ant-pagination-item-link:after { + width: 40px; + height: 40px; + line-height: 40px; + } } + .ant-pagination-item.ant-pagination-item-active { + background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%); + border-radius: 2px; + a { + color: #fff; + } + } + } } + } } // 详情页迷你表格样式 .detailInformatioin { - nz-table { - .ant-table-small { + nz-table { + .ant-table-small { + border-color: #dfdfe0; + border-right: 0; + .ant-table-content { + border-color: #dfdfe0; + .ant-table-body > table { + padding: 0; + .ant-table-thead > tr > th { + background-color: #f0f2f5; + font-weight: 700; + font-size: 18px; + padding: 2px 15px; border-color: #dfdfe0; - border-right: 0; - .ant-table-content { - border-color: #dfdfe0; - .ant-table-body > table { - padding: 0; - .ant-table-thead > tr > th { - background-color: #f0f2f5; - font-weight: 700; - font-size: 14px; - padding: 2px 15px; - border-color: #dfdfe0; - } - .ant-table-tbody > tr > td { - background-color: #f0f2f5; - font-size: 14px; - padding: 2px 15px; - color: #323437; - border-color: #dfdfe0; - } - } - } + } + .ant-table-tbody > tr > td { + background-color: #f0f2f5; + font-size: 14px; + padding: 2px 15px; + color: #323437; + border-color: #dfdfe0; + } } + } } + } } // 日期选择插件背景颜色 @@ -63,14 +103,45 @@ nz-table { } // 分页每页条数选项单位置 nz-pagination { - ul { - .ant-pagination-options { - .ant-pagination-options-size-changer.ant-select{ - position: absolute; - left: 0; - } + ul { + .ant-pagination-options { + .ant-pagination-options-size-changer.ant-select { + position: absolute; + left: 0; + width: 100px; + height: 40px; + color: #3C4F8C; + line-height: 40px !important; + .ant-select-selection--single { + height: 40px; + line-height: 40px !important; + .ant-select-selection-selected-value { + height: 40px; + line-height: 40px !important; + } } + } + } + } + .ant-pagination.mini.ant-table-pagination { + .ant-pagination-prev, .ant-pagination-item, .ant-pagination-next { + width: 40px; + height: 40px; + line-height: 40px; + .ant-pagination-item-link, .ant-pagination-item-link:after { + width: 40px; + height: 40px; + line-height: 40px; + } } + .ant-pagination-item.ant-pagination-item-active { + background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%); + border-radius: 2px; + a { + color: #fff; + } + } + } } html,body,div,h1,h2,h3,h4,h5,h6,p,ul,li,a,span { @@ -114,4 +185,137 @@ body { input { width: 165px; } +} + +// D版本更改背景颜色修改 +nz-layout { + .ant-layout { + background:#F7F8FC; + } + .list[_ngcontent-c3]{ + background-color: #F7F8FC; + padding: 0px !important; + } +} +// onboard-vnf-vm页面调整 +// 頭部導航 +.ant-tabs-bar { + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + border-bottom:none !important; + background-color: #fff; +} +.ant-tabs-nav { + padding-left: 15px !important; + padding-top: 14px !important; +} +.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab { + background-color: #fff !important; + border: 1px solid #fff !important; + border-radius: 2px !important; + margin-right: 0px !important; + padding: 0 35px !important; +} +.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active { + background: #fff !important; + border-color: #7BC7F3 !important; + color: #7BC7F3 !important; +} +.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content { + padding: 20px; +} +.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container { + height: 55px !important; +} +.ant-upload.ant-upload-drag { + border: 2px dashed #d9d9d9 !important; +} +.ant-upload.ant-upload-drag p.ant-upload-text { + color:#42548F !important; + font-family:"ArialMT" !important; + font-size: 13px !important; +} +// 時間框 +.ant-calendar-picker .ant-input { + background-color: #fff; + border-color: #EEEEEE; +} +.ant-calendar-picker:hover { + border-color: #58B7F9; +} +.ant-calendar-picker { + width: 234px !important; +} + +//2019.01.21 add services-list.component.html + +nz-modal { + .ant-modal { + height: 628px; + background: url("assets/images/create-box.png") 100% 100%; + } + .ant-modal-content{ + height: 628px; + background:transparent; + } + .ant-modal-header,ant-modal-title,.ant-modal-footer{ + background:transparent; + border: none; + } + .ant-modal-title{ + font-size:20px; + text-align: center; + color:rgba(255,255,255,1); + line-height:23px; + } + .ant-modal-body{ + span{ + font-size: 16px; + color:rgba(60,79,140,0.5); + line-height: 18px; + display: inline-block; + } + nz-select{ + .ant-select-open.ant-select-selection{ + border: #48C6EF; + } + .ant-select-selection__rendered{ + .ant-select-selection-selected-value{ + color:rgba(60,79,140,0.5)!important; + } + } + } + } + .ant-modal-footer{ + margin: 0 auto; + button{ + width: 126px; + height: 40px; + line-height: 40px; + text-align: center; + border: none; + outline: none; + margin-top: 50px; + } + button:nth-child(1){ + background:#EEEEEE; + border-radius:2px; + margin-left: 50px; + margin-right: 10px; + span{ + color: #9DA7C5; + font-size: 14px !important; + } + } + button:nth-child(2){ + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + box-shadow:0px 0px 2px 0px rgba(14,90,218,1); + border-radius:2px; + margin-left: 20px; + margin-right: 50px; + span{ + color: #FFFFFF; + font-size: 14px !important; + } + } + } }
\ No newline at end of file |
