blob: c8a0249074f218955411baf6a4e9920f005217bb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<nz-spin [nzSpinning]="isSpinning">
<app-basic-info [businessRequirement]="businessRequirement" [NSTinfo]="NSTinfo" [taskModel]="taskModel">
</app-basic-info>
<nz-list class="taskmodel_list" nzBordered [nzHeader]="'Slicing NSI :'" [nzFooter]="null">
<nz-table #basicTable [nzData]="nsiInfo" [nzShowPagination]="false" nzHideOnSinglePage
class="model-table-padding">
<thead>
<tr>
<th>Service Instance Id</th>
<th>Service Instance Name</th>
<th>Service Type</th>
<th width="110px">Status</th>
<th width="110px">Detail</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
<tr>
<td>{{ data.nsi_id }}</td>
<td>{{ data.nsi_name }}</td>
<td>{{ data.nsi_type }}</td>
<td>{{ data.nsi_orchestration_status }}</td>
<td>
<a (click)="showdetail(data)">View Detail</a>
</td>
</tr>
</ng-template>
</tbody>
</nz-table>
</nz-list>
<nz-list class="taskmodel_list" nzBordered [nzHeader]="'End to End Topology:'" [nzFooter]="null">
<!-- <div>status:{{status}}</div> -->
<!-- <img style="width: 100%;" src="assets/images/slicing-business-management/example.png" alt="example" /> -->
<!-- <img src="assets/images/slicing-business-management/server.svg" /> -->
<div class="warp">
<div class="header">
<p>AN</p>
<p>TN</p>
<p class="head_cn">CN</p>
</div>
<ul class="list-box">
<li>
<p>
<img src="assets/images/an-img.png" class="anImg" alt=""/>
</p>
<p *ngIf="isshowran" class="ran_text">{{rantext}}</p>
<p class="ran_adrress">{{businessDetailInfo.an_ip_adrress}}
<img src="assets/images/ask-img.png" alt=""
class="detail-icon"
*ngIf="businessDetailInfo.an_ip_adrress"
(mouseover)="detailFn(false,'ran')" (mouseleave)="detailFn(false,'ran')" /></p>
</li>
<li class="vLan-line">
<p>
Vlan ID:{{businessDetailInfo.an_interface_id}}
</p>
<p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
</li>
<li>
<p class="fantask">{{ businessDetailInfo.an_nextHop_info }}</p>
<p>
<img src="assets/images/tn-edge-img.png" class="tnImg" alt=""/>
</p>
<p>PE</p>
</li>
<li class="three-box">
<p>{{ businessDetailInfo.max_bandWidth }} Mbps</p>
<p>
{{ businessDetailInfo.lantency }} ms
</p>
<p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
<p class="">Link Type:{{businessDetailInfo.link_type}}</p>
</li>
<li>
<p class="fantask">{{businessDetailInfo.cn_nextHop_info}}</p>
<p>
<img src="assets/images/tn-edge-img.png" class="tnImg" />
</p>
<p>PE</p>
</li>
<li class="vLan-line">
<p>
Vlan ID:{{businessDetailInfo.cn_interface_id}}
</p>
<p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
</li>
<li>
<p>
<img src="assets/images/cn-cloud-img.jpg" class="cnCloud" alt=""/>
</p>
<p *ngIf="isshowcore" class="cor_text">{{rantext}}</p>
<p class="cn_adrress">{{businessDetailInfo.cn_ip_adrress}}
<img src="assets/images/ask-img.png" alt=""
class="core_icon"
*ngIf="businessDetailInfo.cn_ip_adrress"
(mouseover)="detailFn(true,'core')" (mouseleave)="detailFn(false,'core')" />
</p>
</li>
</ul>
</div>
</nz-list>
</nz-spin>
|
