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
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',
ngOnInit() {
this.getAlarmFormData();
this.getSourceNames();
- this.getstatuscount();
+ // this.getstatuscount();
}
// Filter box
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;
}
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) => {
series: [
{ data: data.allList },
{ data: data.ActiveList },
- { data: data.closedList }
]
}
}, (err) => {
})
}
// 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',
},
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
- }
- }
]
}
};
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>
Code Review / usecase-ui.git / commitdiff