merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

1 files changed, 28 insertions, 32 deletions

diff --git a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.html b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.html
index e0641d03b..212981aaf 100644
--- a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.html
+++ b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.html
@@ -3,7 +3,7 @@
     <div>
       <div class="row" style="margin-left: 0;">
         <div>
-          <span class="title">Instantiation Status</span>
+          <span class="title" [attr.data-tests-id]="'instantiation-status-title'">Instantiation Status</span>
           <span class="icon-info"
                 triggers="mouseenter:mouseleave"
                 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."
@@ -24,6 +24,7 @@
       <thead class="thead-dark">
       <tr>
         <th scope="col" class="smallTd">User ID</th>
+        <th scope="col" class="smallTd">Action</th>
         <th scope="col" class="normal">Model Name</th>
         <th scope="col" class="normal">Instance Name</th>
         <th scope="col" class="smallTd">Model version</th>
@@ -40,8 +41,9 @@
       </tr>
       </thead>
       <tbody >
-        <tr *ngFor="let data of serviceInfoData; let i = index" [ngClass]="{'odd' : data.serviceIndex%2 == 1}" [id]="data.jobId"  (mouseenter)="currentJobId = data?.jobId">
+        <tr *ngFor="let data of serviceInfoData; trackBy: trackByFn; let i = index" [ngClass]="{'odd' : data.serviceIndex%2 == 1}" [id]="data.jobId">
           <td class="smallTd" id="userId"><custom-ellipsis [id]="data.userId" [value]="data.userId"></custom-ellipsis></td>
+          <td class="smallTd" id="action"><custom-ellipsis [id]="data.action" [value]="data.action | capitalizeAndFormat"></custom-ellipsis></td>
           <td class="normal" id="serviceModelName"><custom-ellipsis [id]="data.serviceModelName" [value]="data.serviceModelName"></custom-ellipsis></td>
           <td class="normal" id="serviceInstanceName"><custom-ellipsis [id]="data.serviceInstanceName" [value]="data.serviceInstanceName"></custom-ellipsis></td>
           <td class="smallTd" id="serviceModelVersion"><custom-ellipsis [id]="data.serviceModelVersion" [value]="data.serviceModelVersion"></custom-ellipsis></td>
@@ -55,37 +57,32 @@
           <td class="smallTd" id="pause"><custom-ellipsis [id]="data.pause" [value]="data.pause"></custom-ellipsis></td>
           <td class="mediumTd" id="created"><custom-ellipsis [id]="data.created" [value]="data.created | date:'MMM. dd, yyyy HH:mm'"></custom-ellipsis></td>
           <td class="last" id="jobStatus" [ngClass]="data.jobStatus">
-            <custom-popover [value]="data.serviceStatus.tooltip" style="float: left;">
-              <svg-icon  id="jobStatusIcon-{{i}}" (click)="auditInfo(data)" svg-directive [fill]="data.serviceStatus.color" [widthViewBox]="27" [heightViewBox]="27"
-                        src="./assets/img/{{data.serviceStatus.iconClassName}}.svg"></svg-icon>
+            <custom-popover [value]="data.serviceStatus.tooltip"  [popoverType]="data?.serviceStatus?.color" style="float: left;">
+              <svg-icon
+                id="jobStatusIcon-{{i}}"
+                (click)="auditInfo(data)"
+                [mode]="data.serviceStatus.color"
+                [size]="'large'"
+                [name]="data.serviceStatus.iconClassName">
+              </svg-icon>
+
             </custom-popover>
-            <div class="menu-div" (click)="onContextMenu($event, data); currentJobId = data.jobId">
+            <div class="menu-div" (click)="onContextMenu($event, data)">
                 <span class="icon-menu"></span>
-              <context-menu>
-                <ng-template contextMenuItem (execute)="open($event?.item)" [enabled]="isOpenVisible">
-                  <div [attr.data-tests-id]="'context-menu-open'">
-                    <span class="context-menu-icon"><i class="fa fa-external-link" aria-hidden="true"></i></span>
-                    Open
-                  </div>
-                </ng-template>
-                <ng-template contextMenuItem (execute)="auditInfo($event?.item)">
-                  <div  [attr.data-tests-id]="'context-menu-audit-info'">
-                    <span class="context-menu-icon audit-icon"><i class="fa fa-info-circle" aria-hidden="true"></i></span>
-                    Audit info
-                  </div>
-                </ng-template>
-                <ng-template contextMenuItem let-item (execute)="deleteItem($event?.item)" [enabled]="isDeleteEnabled">
-                  <div [attr.data-tests-id]="'context-menu-delete'">
-                    <span class="context-menu-icon"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
-                    Delete
-                  </div>
-                </ng-template>
-                <ng-template contextMenuItem let-item (execute)="hideItem($event?.item)" [enabled]="isHideEnabled">
-                  <div [attr.data-tests-id]="'context-menu-hide'">
-                    <span class="context-menu-icon"><i class="fa fa-eye-slash" aria-hidden="true"></i></span>
-                    Hide request
-                  </div>
-                </ng-template>
+                <context-menu>
+                  <ng-template *ngFor="let action of contextMenuActions" contextMenuItem let-item
+                               [visible]="action.visible"
+                               [enabled]="action.enabled"
+                               (execute)="action.click($event.item)">
+                    <div [attr.data-tests-id]="action.dataTestId"
+                         [tooltip]="action?.tooltip"
+                         [tooltipDisabled]="!action.tooltip">
+                      <span class="context-menu-icon">
+                        <i class="fa {{action.className}}" aria-hidden="true"></i>
+                      </span>
+                      {{action.name}}
+                    </div>
+                  </ng-template>
               </context-menu>
             </div>
           </td>
@@ -93,7 +90,6 @@
       </tbody>
     </table>
   </div>
-  <audit-info-modal></audit-info-modal>
 </div>