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 class="instantiationStatusFilter" *ngIf=isInstantiationStatusFilterFlagOn()>
  20           <input
  21             [attr.data-tests-id]="'instantiationStatusFilter'"
  22             class="form-control input-text"
  23             [placeholder]="'filter'"
  24             [(ngModel)]="filterText">
  25         </div>
  26       </div>
  27     </div>
  28   </div>
  29   <div class="instantiation-status-data table-responsive">
  30     <table id="instantiation-status" class="table table-bordered">
  31       <thead class="thead-dark">
  32       <tr>
  33         <th scope="col" class="smallTd">User ID</th>
  34         <th scope="col" class="smallTd">Action</th>
  35         <th scope="col" class="normal">Model Name</th>
  36         <th scope="col" class="normal">Instance Name</th>
  37         <th scope="col" class="smallTd">Model version</th>
  38         <th scope="col" class="normal">Subscriber</th>
  39         <th scope="col" class="mediumTd">Service Type</th>
  40         <th scope="col" class="normal">Region</th>
  41         <th scope="col" class="mediumTd">Tenant</th>
  42         <th scope="col" class="mediumTd">AIC Zone</th>
  43         <th scope="col" class="mediumTd">Project</th>
  44         <th scope="col" class="mediumTd">Owning entity</th>
  45         <th scope="col" class="smallTd">Pause</th>
  46         <th scope="col" class="mediumTd">Date</th>
  47         <th scope="col" class="last">Status</th>
  48       </tr>
  49       </thead>
  50       <tbody >
  51       <tr *ngFor="let data of serviceInfoData | searchFilter: filterText ; trackBy: trackByFn; let i = index" [ngClass]="{'odd' : data.serviceIndex%2 == 1}" [id]="data.jobId">
  52         <td class="smallTd" id="userId"><custom-ellipsis [id]="data.userId" [value]="data.userId"></custom-ellipsis></td>
  53         <td class="smallTd" id="action"><custom-ellipsis [id]="data.action" [value]="data.action | capitalizeAndFormat"></custom-ellipsis></td>
  54         <td class="normal" id="serviceModelName"><custom-ellipsis [id]="data.serviceModelName" [value]="data.serviceModelName"></custom-ellipsis></td>
  55         <td class="normal" id="serviceInstanceName"><custom-ellipsis [id]="data.serviceInstanceName" [value]="data.serviceInstanceName"></custom-ellipsis></td>
  56         <td class="smallTd" id="serviceModelVersion"><custom-ellipsis [id]="data.serviceModelVersion" [value]="data.serviceModelVersion"></custom-ellipsis></td>
  57         <td class="normal" id="subscriberName"><custom-ellipsis [id]="data.subscriberName" [value]="data.subscriberName"></custom-ellipsis></td>
  58         <td class="mediumTd" id="serviceType"><custom-ellipsis [id]="data.serviceType" [value]="data.serviceType"></custom-ellipsis></td>
  59         <td class="normal" id="regionId"><custom-ellipsis [id]="data.regionId" [value]="data.regionId"></custom-ellipsis></td>
  60         <td class="mediumTd" id="tenantName"><custom-ellipsis [id]="data.tenantName" [value]="data.tenantName"></custom-ellipsis></td>
  61         <td class="mediumTd" id="aicZoneName"><custom-ellipsis [id]="data.aicZoneName" [value]="data.aicZoneName"></custom-ellipsis></td>
  62         <td class="mediumTd" id="project"><custom-ellipsis [id]="data.project" [value]="data.project"></custom-ellipsis></td>
  63         <td class="mediumTd" id="owningEntityName"><custom-ellipsis [id]="data.owningEntityName" [value]="data.owningEntityName"></custom-ellipsis></td>
  64         <td class="smallTd" id="pause"><custom-ellipsis [id]="data.pause" [value]="data.pause"></custom-ellipsis></td>
  65         <td class="mediumTd" id="created"><custom-ellipsis [id]="data.created" [value]="data.created | date:'MMM. dd, yyyy HH:mm'"></custom-ellipsis></td>
  66         <td class="last" id="jobStatus" [ngClass]="data.jobStatus">
  67           <custom-popover [value]="data.serviceStatus.tooltip"  [popoverType]="data?.serviceStatus?.color" style="float: left;">
  68             <svg-icon
  69               id="jobStatusIcon-{{i}}"
  70               (click)="auditInfo(data)"
  71               [mode]="data.serviceStatus.color"
  72               [size]="'large'"
  73               [name]="data.serviceStatus.iconClassName">
  74             </svg-icon>
  75
  76           </custom-popover>
  77           <div class="menu-div" (click)="onContextMenu($event, data)">
  78             <span class="icon-menu"></span>
  79             <context-menu>
  80               <ng-template *ngFor="let action of contextMenuActions" contextMenuItem let-item
  81                            [visible]="action.visible"
  82                            [enabled]="action.enabled"
  83                            (execute)="action.click($event.item)">
  84                 <div [attr.data-tests-id]="action.dataTestId"
  85                      [tooltip]="action?.tooltip"
  86                      [tooltipDisabled]="!action.tooltip">
  87                       <span class="context-menu-icon">
  88                         <i class="fa {{action.className}}" aria-hidden="true"></i>
  89                       </span>
  90                   {{action.name}}
  91                 </div>
  92               </ng-template>
  93             </context-menu>
  94           </div>
  95         </td>
  96       </tr>
  97       </tbody>
  98     </table>
  99   </div>
 100 </div>
 101
 102
 103