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     <div class="jobs-table">
  17         <div class="row">
  18             <div class="col-md-12">
  19                 <uib-tabset active="activeJustified" justified="true">
  20                     <uib-tab index="0" heading="Active" id="active-tab">
  21                         <table class="table table-bordered" id="active-table">
  22                             <thead class="thead-default">
  23                                 <tr>
  24                                     <th class="col-md-5">VNF Name</th>
  25                                     <th class="col-md-2">Type</th>
  26                                     <th class="col-md-2">Flow</th>
  27                                     <th class="col-md-2">Start time</th>
  28                                     <th>Status</th>
  29                                     <th></th>
  30                                 </tr>
  31                             </thead>
  32                             <tbody>
  33                                 <tr class="table-headline-row">
  34                                     <th>
  35                                         <span id="in-progress-table-head">IN PROGRESS</span>
  36                                     </th>
  37                                     <th></th>
  38                                     <th></th>
  39                                     <th></th>
  40                                     <th></th>
  41                                     <th></th>
  42                                 </tr>
  43                                 <tr ng-repeat="changeManagement in vm.changeManagements | changeManagementsByStatuses:{statuses: ['FAILED', 'INPROGRESS', 'PENDING']}">
  44                                     <th scope="row">{{changeManagement.instanceReferences.vnfInstanceName || 'No-Instance-Name'}}</th>
  45                                     <td>{{changeManagement.requestScope}}</td>
  46                                     <td>{{changeManagement.requestType}}</td>
  47                                     <td>{{changeManagement.startTime}}</td>
  48                                     <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>
  49                                     <td class="centered" ng-if="changeManagement.requestStatus.requestState == 'INPROGRESS'"><span class="icon-process" ng-click="vm.openInProgressModal({details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
  50                                     <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>
  51                                     <td class="centered"><span class="icon-view"></span></td>
  52                                 </tr>
  53                                 <tr class="table-headline-row">
  54                                     <th>
  55                                         <span id="pending-table-head">PENDING</span>
  56                                     </th>
  57                                     <th></th>
  58                                     <th></th>
  59                                     <th></th>
  60                                     <th></th>
  61                                     <th></th>
  62                                 </tr>
  63                                 <tr ng-repeat="changeManagement in vm.pendingChangeManagements">
  64                                     <th scope="row">{{changeManagement.vnfName}}</th>
  65                                     <td>{{changeManagement.scheduleRequest.scheduleName}}</td>
  66                                     <td>{{changeManagement.workflow}}</td>
  67                                     <td>{{changeManagement.startTime}}</td>
  68                                     <td class="centered"><span class="icon-pending" ng-click="vm.openPendingModal({details: 'change management is pending in scheduler and waiting to be deployed'})"></span></td>
  69                                     <td class="centered"><span class="icon-view"></span></td>
  70                                 </tr>
  71                             </tbody>
  72                         </table>
  73                     </uib-tab>
  74                     <uib-tab index="1" heading="Finished" id="finished-tab">
  75                         <table class="table table-bordered" id="finished-table">
  76                             <thead class="thead-default">
  77                             <tr>
  78                                 <th class="col-md-5">VNF Name</th>
  79                                 <th class="col-md-2">Type</th>
  80                                 <th class="col-md-2">Flow</th>
  81                                 <th class="col-md-2">Start time</th>
  82                                 <th>Status</th>
  83                                 <th></th>
  84                             </tr>
  85                             </thead>
  86                             <tbody>
  87                             <tr class="table-headline-row">
  88                                 <th>
  89                                     <span id="finished-table-head">FINISHED</span>
  90                                 </th>
  91                                 <th></th>
  92                                 <th></th>
  93                                 <th></th>
  94                                 <th></th>
  95                                 <th></th>
  96                             </tr>
  97                             <tr ng-repeat="changeManagement in vm.changeManagements | changeManagementsByStatuses:{statuses: ['COMPLETE']}">
  98                                 <th scope="row">{{changeManagement.instanceReferences.vnfInstanceName || 'No-Instance-Name'}}</th>
  99                                 <td>{{changeManagement.requestScope}}</td>
 100                                 <td>{{changeManagement.requestType}}</td>
 101                                 <td>{{changeManagement.startTime}}</td>
 102                                 <td></td>
 103                                 <td class="centered"><span class="icon-view"></span></td>
 104                             </tr>
 105                             </tbody>
 106                         </table>
 107                     </uib-tab>
 108                 </uib-tabset>
 109             </div>
 110         </div>
 111     </div>
 112 </div>