summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
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>