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="" class="detail-icon"
  49                             *ngIf="businessDetailInfo.an_ip_adrress" (mouseover)="detailFn(false,'ran')"
  50                             (mouseleave)="detailFn(false,'ran')" /></p>
  51                 </li>
  52                 <li class="vLan-line">
  53                     <p>
  54                         Vlan ID:{{businessDetailInfo.an_interface_id}}
  55                     </p>
  56                     <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
  57                 </li>
  58                 <li>
  59                     <p class="fantask">{{ businessDetailInfo.an_nextHop_info }}</p>
  60                     <p>
  61                         <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg" />
  62                     </p>
  63                     <p>PE</p>
  64                 </li>
  65                 <li class="three-box">
  66                     <p>{{ businessDetailInfo.max_bandWidth }} Mbps</p>
  67                     <p>
  68                         {{ businessDetailInfo.lantency }} ms
  69                     </p>
  70                     <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
  71                     <p class="">Link Type:{{businessDetailInfo.link_type}}</p>
  72                 </li>
  73                 <li>
  74                     <p class="fantask">{{businessDetailInfo.cn_nextHop_info}}</p>
  75                     <p>
  76                         <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg" />
  77                     </p>
  78                     <p>PE</p>
  79                 </li>
  80                 <li class="vLan-line">
  81                     <p>
  82                         Vlan ID:{{businessDetailInfo.cn_interface_id}}
  83                     </p>
  84                     <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
  85                 </li>
  86                 <li>
  87                     <p>
  88                         <img src="../../../../../../../assets/images/cn-cloud-img.jpg" class="cnCloud" />
  89                     </p>
  90                     <p *ngIf="isshowcore" class="cor_text">{{rantext}}</p>
  91                     <p class="cn_adrress">{{businessDetailInfo.cn_ip_adrress}}
  92                         <img src="../../../../../../../assets/images/ask-img.png" alt="" class="core_icon"
  93                             *ngIf="businessDetailInfo.cn_ip_adrress" (mouseover)="detailFn(true,'core')"
  94                             (mouseleave)="detailFn(false,'core')" />
  95                     </p>
  96                 </li>
  97             </ul>
  98         </div>
  99     </nz-list>
 100 </nz-spin>