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>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>{{outerData.anVersion}}</p>
  47                 </li>
  48                 <li class="vLan-line">
  49                     <p >
  50                        vLan:{{outerData.vLanText}}
  51                     </p>
  52                     <p class="online-vlan"></p>
  53                 </li>
  54                 <li>
  55                     <p>{{outerData.tnVersion}}</p>
  56                     <p>
  57                         <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/>
  58                     </p>
  59                     <p>{{outerData.tnText}}<br/>Gateway</p>
  60                 </li>
  61                 <li class="three-box" >
  62                     <p>{{outerData.mbps}} Mbps/yyyG</p>
  63                     <p>
  64                        {{outerData.msText}} ms
  65                     </p>
  66                     <p  [ngClass]="{'online-type':outerData.orchestration_status!=='deactivated','offline-type':outerData.orchestration_status=='deactivated'}"></p>
  67                     <p class="">Link Type:{{outerData.linkType}}</p>
  68                 </li>
  69                 <li>
  70                     <p>{{outerData.tnEndVersion}}</p>
  71                     <p>
  72                         <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/>
  73                     </p>
  74                     <p>{{outerData.tnEndText}}<br/>Gateway</p>
  75                 </li>
  76                 <li class="vLan-line">
  77                     <p >
  78                        vLan:{{outerData.cnVlan}}
  79                     </p>
  80                     <p class="online-vlan"></p>
  81                 </li>
  82                 <li>
  83                     <p>
  84                         <img src="../../../../../../../assets/images/cn-cloud-img.jpg" class="cnCloud"/>
  85                     </p>
  86                     <p>{{outerData.cnVersion}}</p>
  87                 </li>
  88             </ul>
  89         </div>
  90     </nz-list>
  91 </nz-spin>