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>{{businessDetailInfo.anVersion}}
  48                         <!-- <img src="../../../../../../../assets/images/ask-img.png" alt=""
  49                         class="detail-icon"
  50                         (mouseover)="detailFn(false,'ran')" (mouseleave)="detailFn(false,'ran')" /></p> -->
  51                 </li>
  52                 <li class="vLan-line">
  53                     <p >
  54                        Vlan ID:{{businessDetailInfo.vLanText}}
  55                     </p>
  56                     <p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
  57                 </li>
  58                 <li>
  59                     <p>{{businessDetailInfo.tnVersion}}</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.mbps}} Mbps</p>
  67                     <p>
  68                        {{businessDetailInfo.msText}} ms
  69                     </p>
  70                     <p  [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
  71                     <p class="">Link Type:{{businessDetailInfo.linkType}}</p>
  72                 </li>
  73                 <li>
  74                     <p>{{businessDetailInfo.tnEndVersion}}</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.cnVlan}}
  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="isshowran" class="cor_text">{{rantext}}</p> -->
  91                     <p>{{businessDetailInfo.cnVersion}}
  92                         <!-- <img src="../../../../../../../assets/images/ask-img.png" alt=""
  93                         class="core_icon"
  94                         (mouseover)="detailFn(true,'core')" (mouseleave)="detailFn(false,'core')" /> -->
  95                     </p>
  96                 </li>
  97             </ul>
  98         </div>
  99     </nz-list>
 100 </nz-spin>