gerrit.onap Code Review - usecase-ui.git/blob

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