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

   1 <script src="app/vid/scripts/controller/change-management.controller.js"></script>
   2 <link rel="stylesheet" type="text/css" href="app/vid/styles/change-management.css" />
   3 <link rel="stylesheet" type="text/css" href="app/vid/styles/change-management-icons.css" />
   4 <div class="changes-management">
   5     <div class="header">
   6         <span id="change-management-headline">VNF Changes</span>
   7         <span class="separator"></span>
   8         <div class="button-container" ng-click="vm.createNewChange()">
   9             <div class="icon-svg" id="change-management-new-button">
  10             <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>
  11         </div>
  12             <span class="button-text">New</span>
  13         </div>
  14
  15         <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">
  16     </div>
  17     <span class="refresh-cm">
  18         Last updated at:
  19         <span class="last-time-updated">{{ vm.lastTimeUpdated }}</span>
  20         <i class="icon-sync" data-tests-id="refresh-cm" ng-click="vm.init()"></i>
  21     </span>
  22     <div class="jobs-table">
  23         <div class="row">
  24             <div class="col-md-12">
  25                 <uib-tabset active="activeJustified" justified="true">
  26                     <uib-tab index="0" heading="Active" id="active-tab">
  27                         <div class="table-wrapper">
  28                         <table class="table table-bordered"  data-tests-id="active-table-cm" id="active-table">
  29                             <thead class="thead-default" ng-click="collapseInProgress=!collapseInProgress">
  30                                 <tr class="table-headline-row">
  31                                     <th >
  32                                         <span ng-class="{'collapse-icon':!collapseInProgress,'expand-icon':collapseInProgress }"></span>
  33                                         <span id="in-progress-table-head">IN PROGRESS</span>
  34                                     </th>
  35                                     <th></th>
  36                                     <th></th>
  37                                     <th></th>
  38                                     <th></th>
  39                                 </tr>
  40                                 <tr ng-show="!collapseInProgress">
  41                                     <th class="col-md-5">VNF Name</th>
  42                                     <th class="col-md-2">Type</th>
  43                                     <th class="col-md-2">Flow</th>
  44                                     <th class="col-md-2">Start time</th>
  45                                     <th>Status</th>
  46                                 </tr>
  47                             </thead>
  48                             <tbody ng-show="!collapseInProgress">
  49
  50                                 <tr  data-tests-id="active-table-cm-row" ng-repeat="changeManagement in vm.changeManagements | changeManagementsByStatuses:{statuses: ['COMPLETE','UNLOCKED'], notContains: true}">
  51                                     <th scope="row">{{
  52                                         changeManagement.vnfNameFromScheduler ||
  53                                         changeManagement.instanceReferences.vnfInstanceId ||
  54                                         'No-Instance-Name'
  55                                         }}</th>
  56                                     <td>{{changeManagement.requestScope}}</td>
  57                                     <td>{{changeManagement.requestType}}</td>
  58                                     <td>{{changeManagement.startTime}}</td>
  59                                     <td class="centered" ng-if="changeManagement.requestStatus.requestState.toUpperCase() === 'FAILED'"><span class="icon-x" ng-click="vm.openFailedModal($event, {details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
  60                                     <td class="centered" ng-if="changeManagement.requestStatus.requestState.toUpperCase() === 'IN_PROGRESS'"><span class="icon-process" ng-click="vm.openInProgressModal($event, {details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
  61                                     <td class="centered"
  62                                         ng-if="['PENDING_MANUAL_TASK','PENDING'].indexOf(changeManagement.requestStatus.requestState.toUpperCase()) !== -1"
  63                                     ><span class="icon-alert" ng-click="vm.openAlertModal($event, {details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
  64                                     <td class="centered"
  65                                         ng-if="['FAILED','IN_PROGRESS','PENDING_MANUAL_TASK','PENDING'].indexOf(changeManagement.requestStatus.requestState.toUpperCase()) == -1"
  66                                     ><span class="icon-alert" ng-click="vm.openFailedModal($event, {requestState: changeManagement.requestStatus.requestState, details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
  67                                 </tr>
  68                             </tbody>
  69                         </table>
  70                         </div>
  71                         <div class="table-wrapper">
  72                         <table class="table table-bordered"  data-tests-id="pending-table-cm" id="pending-table">
  73                             <thead ng-click="collapsePending=!collapsePending">
  74                             <tr class="table-headline-row">
  75                                 <th class="col-md-6">
  76                                     <span ng-class="{'collapse-icon':!collapsePending,'expand-icon':collapsePending }"></span>
  77                                     <span id="pending-table-head">PENDING</span>
  78                                 </th>
  79
  80                                 <th></th>
  81                                 <th></th>
  82                                 <th></th>
  83                                 <th></th>
  84                                 <th></th>
  85                                 <th></th>
  86                                 <th></th>
  87                             </tr>
  88                             <tr class="thead-default" ng-show="!collapsePending">
  89                                 <th class="col-md-2">Schedule ID</th>
  90                                 <th class="col-md-2">CM ticket</th>
  91                                 <th class="col-md-1">VNF name</th>
  92                                 <th class="col-md-1">VNF status</th>
  93                                 <th class="col-md-2">Workflow</th>
  94                                 <th class="col-md-2">Start time</th>
  95                                 <th class="col-md-2">Schedule status</th>
  96                                 <th class="col-md-1">Status</th>
  97                             </tr>
  98                             </thead>
  99                             <tbody ng-show="!collapsePending">
 100
 101                                 <tr data-tests-id="pending-table-cm-row" ng-repeat="changeManagement in vm.pendingChangeManagements">
 102                                     <th scope="row">{{changeManagement.scheduleRequest.scheduleId}}</th>
 103                                     <td>{{changeManagement.aotsChangeId}}</td>
 104                                     <td>{{changeManagement.vnfName}}</td>
 105                                     <td>{{changeManagement.status}}</td>
 106                                     <td>{{changeManagement.scheduleRequest.domainData[1].value}}</td>
 107                                     <td>{{changeManagement.scheduleRequest.createDateTime }}</td><!--| date:"MM/dd/yyyy HH:mm:ss"-->
 108                                     <td>{{changeManagement.scheduleRequest.status}}</td>
 109                                     <td class="centered"><span class="cancel-action"
 110                                                                ng-class="{'icon-pending':changeManagement.scheduleRequest.status!=='Deleted', 'icon-deleted': changeManagement.scheduleRequest.status=='Deleted'}"
 111                                                                ng-click="vm.openPendingModal($event, changeManagement)"
 112                                                                ng-show="vm.isChangeManagementDeleted(changeManagement)"
 113                                                                data-tests-id="icon-status-{{changeManagement.scheduleRequest.scheduleId}}"></span>
 114                                     </td>
 115                                 </tr>
 116                             </tbody>
 117                         </table>
 118                         </div>
 119                     </uib-tab>
 120                     <uib-tab index="1" heading="Finished" id="finished-tab">
 121                         <table class="table table-bordered" id="finished-table">
 122                             <thead class="thead-default">
 123                             <tr>
 124                                 <th class="col-md-5">VNF Name</th>
 125                                 <th class="col-md-2">Type</th>
 126                                 <th class="col-md-2">Flow</th>
 127                                 <th class="col-md-2">Start time</th>
 128                                 <th>Status</th>
 129                                 <th></th>
 130                             </tr>
 131                             </thead>
 132                             <tbody>
 133                             <tr class="table-headline-row">
 134                                 <th>
 135                                     <span id="finished-table-head">FINISHED</span>
 136                                 </th>
 137                                 <th></th>
 138                                 <th></th>
 139                                 <th></th>
 140                                 <th></th>
 141                                 <th></th>
 142                             </tr>
 143                             <tr ng-repeat="changeManagement in vm.changeManagements | changeManagementsByStatuses:{statuses: ['COMPLETE','UNLOCKED']}">
 144                                 <th class="vnf-name" scope="row">{{
 145                                     changeManagement.vnfNameFromScheduler ||
 146                                     changeManagement.instanceReferences.vnfInstanceId ||
 147                                     'No-Instance-Name'
 148                                     }}</th>
 149                                 <td>{{changeManagement.requestScope}}</td>
 150                                 <td>{{changeManagement.requestType}}</td>
 151                                 <td>{{changeManagement.startTime}}</td>
 152                                 <td></td>
 153                                 <td class="centered"><span class="icon-view"></span></td>
 154                             </tr>
 155                             </tbody>
 156                         </table>
 157                     </uib-tab>
 158                 </uib-tabset>
 159             </div>
 160         </div>
 161     </div>
 162 </div>