vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.html

   1 <div class="row">
   2   <div class="instantiation-status-header">
   3     <div>
   4       <div class="row" style="margin-left: 0;">
   5         <div>
   6           <span class="title" [attr.data-tests-id]="'instantiation-status-title'">Instantiation Status</span>
   7           <span class="icon-info"
   8                 triggers="mouseenter:mouseleave"
   9                 popover="This table presents all the instantiation requests you made that are waiting, during or finished instantiating. You may see others requests by removing the Show only my requests checkmark."
  10                 placement="bottom"></span>
  11
  12         </div>
  13         <div class="lastUpdate">
  14           <div style="float: left;margin-top: 3px;"><span>Last update:  {{lastUpdatedDate | date:'MMM. dd, yyyy | HH:mm'}}</span></div>
  15           <div id="refresh-btn" class="refresh-btn" [ngClass]="{'spin' : !dataIsReady}" (click)="deactivateInterval(); refreshData(); activateInterval();">
  16             <span class="icon-refresh"></span>
  17           </div>
  18         </div>
  19       </div>
  20     </div>
  21   </div>
  22   <div class="instantiation-status-data table-responsive">
  23     <table id="instantiation-status" class="table table-bordered">
  24       <thead class="thead-dark">
  25       <tr>
  26         <th scope="col" class="smallTd">User ID</th>
  27         <th scope="col" class="smallTd">Action</th>
  28         <th scope="col" class="normal">Model Name</th>
  29         <th scope="col" class="normal">Instance Name</th>
  30         <th scope="col" class="smallTd">Model version</th>
  31         <th scope="col" class="normal">Subscriber</th>
  32         <th scope="col" class="mediumTd">Service Type</th>
  33         <th scope="col" class="normal">Region</th>
  34         <th scope="col" class="mediumTd">Tenant</th>
  35         <th scope="col" class="mediumTd">AIC Zone</th>
  36         <th scope="col" class="mediumTd">Project</th>
  37         <th scope="col" class="mediumTd">Owning entity</th>
  38         <th scope="col" class="smallTd">Pause</th>
  39         <th scope="col" class="mediumTd">Date</th>
  40         <th scope="col" class="last">Status</th>
  41       </tr>
  42       </thead>
  43       <tbody >
  44         <tr *ngFor="let data of serviceInfoData; trackBy: trackByFn; let i = index" [ngClass]="{'odd' : data.serviceIndex%2 == 1}" [id]="data.jobId">
  45           <td class="smallTd" id="userId"><custom-ellipsis [id]="data.userId" [value]="data.userId"></custom-ellipsis></td>
  46           <td class="smallTd" id="action"><custom-ellipsis [id]="data.action" [value]="data.action | capitalizeAndFormat"></custom-ellipsis></td>
  47           <td class="normal" id="serviceModelName"><custom-ellipsis [id]="data.serviceModelName" [value]="data.serviceModelName"></custom-ellipsis></td>
  48           <td class="normal" id="serviceInstanceName"><custom-ellipsis [id]="data.serviceInstanceName" [value]="data.serviceInstanceName"></custom-ellipsis></td>
  49           <td class="smallTd" id="serviceModelVersion"><custom-ellipsis [id]="data.serviceModelVersion" [value]="data.serviceModelVersion"></custom-ellipsis></td>
  50           <td class="normal" id="subscriberName"><custom-ellipsis [id]="data.subscriberName" [value]="data.subscriberName"></custom-ellipsis></td>
  51           <td class="mediumTd" id="serviceType"><custom-ellipsis [id]="data.serviceType" [value]="data.serviceType"></custom-ellipsis></td>
  52           <td class="normal" id="regionId"><custom-ellipsis [id]="data.regionId" [value]="data.regionId"></custom-ellipsis></td>
  53           <td class="mediumTd" id="tenantName"><custom-ellipsis [id]="data.tenantName" [value]="data.tenantName"></custom-ellipsis></td>
  54           <td class="mediumTd" id="aicZoneName"><custom-ellipsis [id]="data.aicZoneName" [value]="data.aicZoneName"></custom-ellipsis></td>
  55           <td class="mediumTd" id="project"><custom-ellipsis [id]="data.project" [value]="data.project"></custom-ellipsis></td>
  56           <td class="mediumTd" id="owningEntityName"><custom-ellipsis [id]="data.owningEntityName" [value]="data.owningEntityName"></custom-ellipsis></td>
  57           <td class="smallTd" id="pause"><custom-ellipsis [id]="data.pause" [value]="data.pause"></custom-ellipsis></td>
  58           <td class="mediumTd" id="created"><custom-ellipsis [id]="data.created" [value]="data.created | date:'MMM. dd, yyyy HH:mm'"></custom-ellipsis></td>
  59           <td class="last" id="jobStatus" [ngClass]="data.jobStatus">
  60             <custom-popover [value]="data.serviceStatus.tooltip"  [popoverType]="data?.serviceStatus?.color" style="float: left;">
  61               <svg-icon
  62                 id="jobStatusIcon-{{i}}"
  63                 (click)="auditInfo(data)"
  64                 [mode]="data.serviceStatus.color"
  65                 [size]="'large'"
  66                 [name]="data.serviceStatus.iconClassName">
  67               </svg-icon>
  68
  69             </custom-popover>
  70             <div class="menu-div" (click)="onContextMenu($event, data)">
  71                 <span class="icon-menu"></span>
  72                 <context-menu>
  73                   <ng-template *ngFor="let action of contextMenuActions" contextMenuItem let-item
  74                                [visible]="action.visible"
  75                                [enabled]="action.enabled"
  76                                (execute)="action.click($event.item)">
  77                     <div [attr.data-tests-id]="action.dataTestId"
  78                          [tooltip]="action?.tooltip"
  79                          [tooltipDisabled]="!action.tooltip">
  80                       <span class="context-menu-icon">
  81                         <i class="fa {{action.className}}" aria-hidden="true"></i>
  82                       </span>
  83                       {{action.name}}
  84                     </div>
  85                   </ng-template>
  86               </context-menu>
  87             </div>
  88           </td>
  89       </tr>
  90       </tbody>
  91     </table>
  92   </div>
  93 </div>
  94
  95
  96