harbor/static/resources/js/components/replication/list-replication.directive.html

<div class="tab-pane">
  <div class="col-xs-12 col-md-12 each-tab-pane">
    <div class="form-inline">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="" ng-model="vm.replicationPolicyName" size="30">
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button" ng-click="vm.searchReplicationPolicy()"><span class="glyphicon glyphicon-search"></span></button>
        </span>
      </div>
      <button ng-if="!vm.isOpen" class="btn btn-success" type="button" ng-click="vm.addReplication()" data-toggle="modal" data-target="#createPolicyModal"><span class="glyphicon glyphicon-plus"></span>// 'add_new_policy' | tr //</button>
      <create-policy reload="vm.retrievePolicy()" action="vm.action" modal-title="//vm.modalTitle//" policy-id="//vm.policyId//"></create-policy>
    </div>
    <div class="pane-split" id="upon-pane"> 	           
      <div class="sub-pane-split">
        <div class="table-head-container">
        <table class="table table-pane table-header">
    			 <thead>
            <th width="10%">// 'name' | tr //</th>
            <th width="18%">// 'description' | tr //</th>
            <th width="18%">// 'destination' | tr //</th>
            <th width="18%">// 'last_start_time' | tr //</th>
            <th width="14%">// 'activation' | tr// </th>
            <th width="15%">// 'actions' | tr //</th>
    			 </thead>
        </table>
        </div>
        <div class="table-body-container" style="height: 250px;">
          <table class="table table-pane">
      			 <tbody>
              <tr ng-if="vm.replicationPolicies.length == 0">
                <td colspan="7" height="100%" class="empty-hint" ><h3 class="text-muted">// 'no_replication_policies_add_new' | tr //</h3></td>
              </tr>
              <tr policy_id="//r.id//" ng-if="vm.replicationPolicies.length > 0" ng-repeat="r in vm.replicationPolicies" value="//vm.last = $last//"> 
                <td width="10%">//r.name//</td>
                <td width="18%" style="padding-left: 10px;">//r.description//</td>
                <td width="18%" style="padding-left: 15px;">//r.target_name//</td>
                <td width="18%" style="padding-left: 18px;">//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
                <td width="14%"  style="padding-left: 18px;" ng-switch on="//r.enabled//">
                  <span ng-switch-when="1">// 'enabled' | tr //</span>
                  <span ng-switch-when="0">// 'disabled' | tr //</span>
                </td>
                <td width="15%" style="padding-left: 20px;">
                  <div class="display-inline-block" ng-switch on="//r.enabled//">
                   <a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 0)" title="// 'disabled' | tr //"><span ng-switch-when="1" class="glyphicon glyphicon-stop color-danger"></span></a>
                   <a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 1)" title="// 'enabled' | tr //"><span ng-switch-when="0" class="glyphicon glyphicon-play color-success"></span></a>
                  </div>
                  &nbsp;
                  <a href="javascript:void(0);" data-toggle="modal" data-target="#createPolicyModal" ng-click="vm.editReplication(r.id)" title="// 'edit_policy' | tr //"><span class="glyphicon glyphicon-pencil"></span></a>
                  &nbsp;
                  <!--a href="javascript:void(0);"><span class="glyphicon glyphicon-trash"></span></a -->
                </td>
              </tr>
            </tbody>
      		</table>
        </div>
      </div>
    </div>
    <div class="col-xs-4 col-md-12 well well-sm well-custom well-split"><div class="col-md-offset-10">//vm.replicationPolicies ? vm.replicationPolicies.length : 0// // 'items' | tr //</div></div>  
    <!--p class="split-handle"><span class="glyphicon glyphicon-align-justify"></span></p-->
    <h4 class="h4-custom-down">// 'replication_jobs' | tr //</h4>
    <hr class="hr-line"/>
    <div class="form-inline">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="" ng-model="vm.replicationJobName" size="30">
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button" ng-click="vm.searchReplicationJob()" ng-disabled="vm.refreshPending"><span class="glyphicon glyphicon-search"></span></button>
        </span>
      </div>
      <div class="input-group">
        <label for="selStatus" class="control-label label-custom">// 'status' | tr //:</label>
        <div class="input-group">
          <select class="form-control" id="selStatus" ng-options="st.value for st in vm.jobStatus() track by st.key" ng-model="vm.currentStatus" ng-change="vm.searchReplicationJob()"></select>
        </div> 
      </div>
      <div class="input-group">
        <label for="fromDatePicker" class="control-label label-custom">// 'from' | tr //:</label>
        <div class="input-group datetimepicker">
          <input id="fromDatePicker" class="form-control" type="text" readonly="readonly" ng-model="vm.fromDate" ng-change="vm.pickUp({key:'fromDate', value: vm.fromDate})" size="10">
          <span class="input-group-addon">
            <a href="javascript:void(0);"><span class="glyphicon glyphicon-calendar"></span></a>
          </span>
        </div>
      </div>
      <div class="input-group">
        <label for="toDatePicker" class="control-label label-custom">// 'to' | tr //:</label>
	      <div class="input-group datetimepicker">
          <input id="toDatePicker" class="form-control" type="text" readonly="readonly" ng-model="vm.toDate" ng-change="vm.pickUp({key:'toDate', value: vm.toDate})" size="10">
          <span class="input-group-addon">
            <a href="javascript:void(0);"><span class="glyphicon glyphicon-calendar"></span></a>
          </span>
        </div>
      </div>		
      <div class="input-group">
        <button type="button" class="btn btn-success" ng-click="vm.searchReplicationJob()"><span class="glyphicon glyphicon-refresh"></span></button>
      </div>
    </div> 
    <div class="pane-split" id="down-pane">   
      <div class="sub-pane-split">
        <div class="table-head-container">
          <table class="table table-pane table-header">
      			 <thead>
              <th width="15%">// 'name' | tr //</th>
              <th width="12%">// 'operation' | tr //</th>
              <th width="18%">// 'creation_time' | tr //</th>
              <th width="18%">// 'start_time' | tr //</th>
              <th width="18%">// 'end_time' | tr //</th>
              <th width="9%">// 'status' | tr //</th>
              <th width="10%">// 'logs' | tr //</th>
      			 </thead>
          </table>
         </div>
          <div class="table-body-container" style="height: 370px;">
            <table class="table table-pane">
        			 <tbody>
                <tr ng-if="vm.replicationJobs.length == 0">
                  <td colspan="4" height="100%" class="empty-hint" ><h3 class="text-muted">// 'no_replication_jobs' | tr //</h3></td>
                </tr>
                <tr ng-if="vm.replicationJobs.length > 0" ng-repeat="r in vm.replicationJobs"> 
                  <td width="15%">//r.repository//</td>
                  <td width="12%">//r.operation//</td>
                  <td width="18%" style="padding-left: 15px;">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
                  <td width="18%" style="padding-left: 15px;">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
                  <td width="18%" style="padding-left: 18px;">//r.update_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
                  <td width="9%"  style="padding-left: 20px;">//r.status//</td>
                  <td width="10%" align="left">
                    <a ng-show="r.status != 'canceled' && r.status != 'pending'" href="javascript:void(0);" ng-click="vm.downloadLog(r.id)" title="// 'download_log' | tr //"><span style="margin-left: 10px;" class="glyphicon glyphicon-file"></span></a>
                  </td>
                </tr>
              </tbody>
        		</table>
          </div>
        </div>
      </div>  
    </div>  
  </div>          
</div>