vid-app-common/src/main/webapp/app/vid/scripts/view-models/change-management.html

   1 <link rel="stylesheet" type="text/css" href="app/vid/styles/change-management.css" />
   2 <link rel="stylesheet" type="text/css" href="app/vid/styles/change-management-icons.css" />
   3 <div class="changes-management">
   4     <div class="header">
   5         <span id="change-management-headline">VNF Changes</span>
   6         <span class="separator"></span>
   7         <div class="button-container" ng-click="vm.createNewChange()">
   8             <div class="icon-svg" id="change-management-new-button">
   9             <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 55.47337 55.63023"><path class="icon-filling" d="M27.7367.07843A27.73669,27.73669,0,1,0,55.4734,27.81512,27.73757,27.73757,0,0,0,27.7367.07843ZM40.18824,29.6178H29.53938V40.26666a1.80267,1.80267,0,0,1-3.60535,0V29.6178H15.28516a1.80267,1.80267,0,0,1,0-3.60535H25.934V15.36359a1.80267,1.80267,0,0,1,3.60535,0V26.01245H40.18824a1.80267,1.80267,0,1,1,0,3.60535Z"/></svg>
  10         </div>
  11             <span class="button-text">New</span>
  12         </div>
  13
  14         <input type="search" id="change-management-search" class="search-changes" ng-change="vm.searchChanges()" ng-model-options="{debounce: 300}" ng-model="vm.searchChangesTerm" placeholder="Type to search">
  15     </div>
  16     <span class="refresh-cm">
  17         Last updated at:
  18         <span class="last-time-updated">{{ vm.lastTimeUpdated }}</span>
  19         <i class="icon-sync" data-tests-id="refresh-cm" ng-click="vm.init()"></i>
  20     </span>
  21     <div class="jobs-table">
  22         <div class="row">
  23             <div class="col-md-12">
  24                 <uib-tabset active="activeJustified" justified="true">
  25                     <uib-tab index="0" heading="Active" id="active-tab">
  26                         <div class="table-wrapper">
  27                         <table class="table table-bordered"  data-tests-id="active-table-cm" id="active-table">
  28                             <thead class="thead-default" ng-click="collapseInProgress=!collapseInProgress">
  29                                 <tr class="table-headline-row">
  30                                     <th >
  31                                         <span ng-class="{'collapse-icon':!collapseInProgress,'expand-icon':collapseInProgress }"></span>
  32                                         <span id="in-progress-table-head">IN PROGRESS</span>
  33                                     </th>
  34                                     <th></th>
  35                                     <th></th>
  36                                     <th></th>
  37                                     <th></th>
  38                                 </tr>
  39                                 <tr ng-show="!collapseInProgress">
  40                                     <th class="col-md-5">VNF Name</th>
  41                                     <th class="col-md-2">Type</th>
  42                                     <th class="col-md-2">Flow</th>
  43                                     <th class="col-md-2">Start time</th>
  44                                     <th>Status</th>
  45                                 </tr>
  46                             </thead>
  47                             <tbody ng-show="!collapseInProgress">
  48
  49                                 <tr  data-tests-id="active-table-cm-row" ng-repeat="changeManagement in vm.changeManagements | changeManagementsByStatuses:{statuses: ['FAILED', 'IN_PROGRESS', 'PENDING']}">
  50                                     <th scope="row">{{changeManagement.instanceReferences.vnfInstanceName || 'No-Instance-Name'}}</th>
  51                                     <td>{{changeManagement.requestScope}}</td>
  52                                     <td>{{changeManagement.requestType}}</td>
  53                                     <td>{{changeManagement.startTime}}</td>
  54                                     <td class="centered" ng-if="changeManagement.requestStatus.requestState == 'FAILED'"><span class="icon-x" ng-click="vm.openFailedModal({details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
  55                                     <td class="centered" ng-if="changeManagement.requestStatus.requestState == 'IN_PROGRESS'"><span class="icon-process" ng-click="vm.openInProgressModal({details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
  56                                     <td class="centered" ng-if="changeManagement.requestStatus.requestState == 'PENDING'"><span class="icon-alert" ng-click="vm.openAlertModal({details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
  57                                 </tr>
  58                             </tbody>
  59                         </table>
  60                         </div>
  61                         <div class="table-wrapper">
  62                         <table class="table table-bordered"  data-tests-id="pending-table-cm" id="pending-table">
  63                             <thead ng-click="collapsePending=!collapsePending">
  64                             <tr class="table-headline-row">
  65                                 <th class="col-md-6">
  66                                     <span ng-class="{'collapse-icon':!collapsePending,'expand-icon':collapsePending }"></span>
  67                                     <span id="pending-table-head">PENDING</span>
  68                                 </th>
  69
  70                                 <th></th>
  71                                 <th></th>
  72                                 <th></th>
  73                                 <th></th>
  74                                 <th></th>
  75                                 <th></th>
  76                                 <th></th>
  77                             </tr>
  78                             <tr class="thead-default" ng-show="!collapsePending">
  79                                 <th class="col-md-2">Schedule ID</th>
  80                                 <th class="col-md-2">CM ticket</th>
  81                                 <th class="col-md-1">VNF name</th>
  82                                 <th class="col-md-1">VNF status</th>
  83                                 <th class="col-md-2">Workflow</th>
  84                                 <th class="col-md-2">Start time</th>
  85                                 <th class="col-md-2">Schedule status</th>
  86                                 <th class="col-md-1">Status</th>
  87                             </tr>
  88                             </thead>
  89                             <tbody ng-show="!collapsePending">
  90
  91                                 <tr data-tests-id="pending-table-cm-row" ng-repeat="changeManagement in vm.pendingChangeManagements">
  92                                     <th scope="row">{{changeManagement.scheduleRequest.scheduleId}}</th>
  93                                     <td>{{changeManagement.aotsChangeId}}</td>
  94                                     <td>{{changeManagement.vnfName}}</td>
  95                                     <td>{{changeManagement.status}}</td>
  96                                     <td>{{changeManagement.scheduleRequest.domainData[1].value}}</td>
  97                                     <td>{{changeManagement.scheduleRequest.createDateTime }}</td><!--| date:"MM/dd/yyyy HH:mm:ss"-->
  98                                     <td>{{changeManagement.scheduleRequest.status}}</td>
  99                                     <td class="centered"><span class="cancel-action" ng-class="{'icon-pending':changeManagement.scheduleRequest.status!=='Deleted', 'icon-deleted': changeManagement.scheduleRequest.status=='Deleted'}"
 100                                                                 ng-click="vm.openPendingModal($event, changeManagement)"></span></td>
 101                                 </tr>
 102                             </tbody>
 103                         </table>
 104                         </div>
 105                     </uib-tab>
 106                     <uib-tab index="1" heading="Finished" id="finished-tab">
 107                         <table class="table table-bordered" id="finished-table">
 108                             <thead class="thead-default">
 109                             <tr>
 110                                 <th class="col-md-5">VNF Name</th>
 111                                 <th class="col-md-2">Type</th>
 112                                 <th class="col-md-2">Flow</th>
 113                                 <th class="col-md-2">Start time</th>
 114                                 <th>Status</th>
 115                                 <th></th>
 116                             </tr>
 117                             </thead>
 118                             <tbody>
 119                             <tr class="table-headline-row">
 120                                 <th>
 121                                     <span id="finished-table-head">FINISHED</span>
 122                                 </th>
 123                                 <th></th>
 124                                 <th></th>
 125                                 <th></th>
 126                                 <th></th>
 127                                 <th></th>
 128                             </tr>
 129                             <tr ng-repeat="changeManagement in vm.changeManagements | changeManagementsByStatuses:{statuses: ['COMPLETE']}">
 130                                 <th scope="row">{{changeManagement.instanceReferences.vnfInstanceName || 'No-Instance-Name'}}</th>
 131                                 <td>{{changeManagement.requestScope}}</td>
 132                                 <td>{{changeManagement.requestType}}</td>
 133                                 <td>{{changeManagement.startTime}}</td>
 134                                 <td></td>
 135                                 <td class="centered"><span class="icon-view"></span></td>
 136                             </tr>
 137                             </tbody>
 138                         </table>
 139                     </uib-tab>
 140                 </uib-tabset>
 141             </div>
 142         </div>
 143     </div>
 144 </div>